@praxisui/dynamic-form 9.0.0-beta.85 → 9.0.0-beta.88

package/fesm2022/praxisui-dynamic-form.mjs

@@ -23,7 +23,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { map, firstValueFrom, BehaviorSubject, Subject, throwError, Subscription, combineLatest, debounceTime as debounceTime$1, takeUntil as takeUntil$1 } from 'rxjs';
 import { map as map$1, takeUntil, skip, take, timeout, tap, debounceTime, startWith, finalize } from 'rxjs/operators';
 import * as i1 from '@praxisui/core';
-import { serializeEntityLookupValueForPayload, PraxisI18nService, PraxisIconDirective, providePraxisI18nConfig, RULE_PROPERTY_SCHEMA, FIELD_METADATA_CAPABILITIES, migrateFormLayoutRule, PraxisJsonLogicService, normalizeFormLayoutItems, deepMerge, createDefaultFormConfig, normalizeFormConfig as normalizeFormConfig$1, ensureIds, createEmptyRichContentDocument, isPraxisRuntimeGlobalActionEffect, ASYNC_CONFIG_STORAGE, withFormConfigSections, createFieldLayoutItem, getFormLayoutFieldNames, LoggerService, createCorporateLoggerConfig, ConsoleLoggerSink, GlobalActionService, ResourceQuickConnectComponent, composeHeadersWithVersion, buildApiUrl, mapFieldDefinitionsToMetadata, reconcileFormConfig, materializeFormLayoutFromMetadata, syncWithServerMetadata, PRAXIS_LOADING_CTX, evaluateFieldAccess, normalizeControlTypeKey, normalizePraxisEffectPolicy, buildPraxisEffectDistinctKey, getFormColumnFieldNames, resolveSpan, resolveOffset, resolveOrder, resolveHidden, buildSchemaIdStorageKeySegment, buildSchemaId, fetchWithETag, resolveControlTypeAlias, getTextTransformer, MemoryCacheAdapter, LocalStorageCacheAdapter, SchemaMetadataClient, CONNECTION_STORAGE, API_URL, PRAXIS_LOADING_RENDERER, FORM_HOOKS_PRESETS, EmptyStateCardComponent, isValidFormConfig, ComponentMetadataRegistry, FieldControlType, isRequiredGlobalActionPayloadMissing, GLOBAL_ACTION_CATALOG, PRAXIS_GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, SURFACE_OPEN_I18N_NAMESPACE, getGlobalActionUiSchema, getRequiredGlobalActionPayloadKeys, hasMeaningfulGlobalActionPayloadValue, SurfaceOpenActionEditorComponent, SURFACE_OPEN_I18N_CONFIG, validateGlobalActionRefs, normalizeFormMetadata } from '@praxisui/core';
+import { serializeEntityLookupValueForPayload, PraxisI18nService, PraxisIconButtonComponent, PraxisIconDirective, providePraxisI18nConfig, RULE_PROPERTY_SCHEMA, FIELD_METADATA_CAPABILITIES, migrateFormLayoutRule, PraxisJsonLogicService, normalizeFormLayoutItems, deepMerge, createDefaultFormConfig, normalizeFormConfig as normalizeFormConfig$1, ensureIds, createEmptyRichContentDocument, isPraxisRuntimeGlobalActionEffect, ASYNC_CONFIG_STORAGE, withFormConfigSections, createFieldLayoutItem, getFormLayoutFieldNames, LoggerService, createCorporateLoggerConfig, ConsoleLoggerSink, GlobalActionService, ResourceQuickConnectComponent, composeHeadersWithVersion, buildApiUrl, mapFieldDefinitionsToMetadata, reconcileFormConfig, materializeFormLayoutFromMetadata, syncWithServerMetadata, PRAXIS_LOADING_CTX, evaluateFieldAccess, normalizeControlTypeKey, normalizePraxisEffectPolicy, buildPraxisEffectDistinctKey, getFormColumnFieldNames, resolveSpan, resolveOffset, resolveOrder, resolveHidden, buildSchemaIdStorageKeySegment, buildSchemaId, fetchWithETag, resolveControlTypeAlias, getTextTransformer, MemoryCacheAdapter, LocalStorageCacheAdapter, SchemaMetadataClient, CONNECTION_STORAGE, API_URL, PRAXIS_LOADING_RENDERER, FORM_HOOKS_PRESETS, EmptyStateCardComponent, isValidFormConfig, ComponentMetadataRegistry, FieldControlType, isRequiredGlobalActionPayloadMissing, GLOBAL_ACTION_CATALOG, PRAXIS_GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, SURFACE_OPEN_I18N_NAMESPACE, getGlobalActionUiSchema, getRequiredGlobalActionPayloadKeys, hasMeaningfulGlobalActionPayloadValue, SurfaceOpenActionEditorComponent, SURFACE_OPEN_I18N_CONFIG, validateGlobalActionRefs, normalizeFormMetadata } from '@praxisui/core';
 import * as i1$1 from '@praxisui/dynamic-fields';
 import { getControlTypeCatalog, ConfirmDialogComponent, DynamicFieldLoaderDirective } from '@praxisui/dynamic-fields';
 import { BaseAiAdapter, AgenticAuthoringTurnClientService, PraxisAssistantSessionRegistryService, PraxisAssistantTurnOrchestratorService, createPraxisAssistantViewportLayout, PraxisAiAssistantShellComponent } from '@praxisui/ai';
@@ -1690,11 +1690,11 @@ class CanvasToolbarComponent {
         return this.i18n.t(key, params, fallback, PRAXIS_DYNAMIC_FORM_I18N_NAMESPACE);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CanvasToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CanvasToolbarComponent, isStandalone: true, selector: "praxis-canvas-toolbar", inputs: { selectedElement: "selectedElement" }, outputs: { editMetadata: "editMetadata", delete: "delete", moveUp: "moveUp", moveDown: "moveDown", selectPath: "selectPath", requestClose: "requestClose", toggleReadonly: "toggleReadonly", toggleRequired: "toggleRequired", toggleHidden: "toggleHidden", toggleDisabled: "toggleDisabled" }, host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, ngImport: i0, template: "<div class=\"canvas-toolbar-container\" [class.closing]=\"closing\" role=\"toolbar\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.ariaLabel', 'Toolbar de configura\u00E7\u00E3o do canvas')\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"triggerClose()\"\n    [matTooltip]=\"tx('dynamicForm.canvasToolbar.close.tooltip', 'Fechar')\"\n    [matTooltipShowDelay]=\"300\"\n    [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.close.ariaLabel', 'Fechar toolbar')\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <div class=\"toolbar-surface\">\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.breadcrumb.ariaLabel', 'Caminho do formul\u00E1rio')\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.move', 'Mover')\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.moveUp', 'Mover para cima')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.moveUp', 'Mover para cima')\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.moveDown', 'Mover para baixo')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.moveDown', 'Mover para baixo')\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.config', 'Configura\u00E7\u00E3o')\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.visibility', 'Visibilidade e estados')\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleReadonly', 'Alternar somente leitura')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleReadonly', 'Alternar somente leitura')\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleVisibility', 'Alternar visibilidade')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleVisibility', 'Alternar visibilidade')\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleDisabled', 'Alternar desabilitado')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleDisabled', 'Alternar desabilitado')\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.validation', 'Valida\u00E7\u00E3o')\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleRequired', 'Alternar obrigat\u00F3rio')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleRequired', 'Alternar obrigat\u00F3rio')\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.danger', 'A\u00E7\u00F5es perigosas')\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.remove', 'Remover')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.remove', 'Remover')\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:var(--praxis-layer-authoring-toolbar, 340);pointer-events:none;--canvas-primary: var( --md-sys-color-primary, var(--md-sys-color-primary) );--canvas-surface: var( --md-sys-color-surface, var(--md-sys-color-surface) );--canvas-on-surface: var( --md-sys-color-on-surface, var(--md-sys-color-on-surface) );--canvas-error: var( --md-sys-color-error, var(--md-sys-color-error) );--canvas-border-color: var(--pfx-surface-border, var(--md-sys-color-outline-variant));--primary: var(--md-sys-color-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--md-sys-color-on-primary);--surface: var(--md-sys-color-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --md-sys-color-surface-variant, var(--md-sys-color-surface-variant) );--on-surface-variant: var( --md-sys-color-on-surface-variant, var(--md-sys-color-on-surface-variant) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: var(--md-sys-color-outline-variant);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: var(--md-sys-color-surface-container-low)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:var(--md-sys-elevation-level3);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;overflow:visible;animation:toolbarIn .14s ease-out}.toolbar-surface{display:grid;grid-template-rows:auto auto;border-radius:inherit;overflow:hidden;background:var(--md-sys-color-surface-container-low)}.canvas-toolbar-container.closing{pointer-events:none;animation:toolbarOut .14s ease-in forwards}.toolbar-close{--p-close-size: 36px;--p-close-icon: 20px;position:absolute;top:-18px;right:-18px;z-index:10;width:var(--p-close-size);height:var(--p-close-size);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;background:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--md-sys-elevation-level1);color:var(--md-sys-color-on-surface);--mdc-icon-button-state-layer-size: calc(var(--p-close-size) + 4px);opacity:0;pointer-events:none;transition:background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .12s ease}.canvas-toolbar-container:hover .toolbar-close,.canvas-toolbar-container:focus-within .toolbar-close,.toolbar-close:focus-visible,.canvas-toolbar-container.closing .toolbar-close{opacity:1;pointer-events:auto}.toolbar-close:hover{background:var(--md-sys-color-surface-container-high);box-shadow:var(--md-sys-elevation-level2)}.toolbar-close:active{transform:scale(.98)}.toolbar-close:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.toolbar-close .mat-icon{width:var(--p-close-icon);height:var(--p-close-icon);font-size:var(--p-close-icon);line-height:var(--p-close-icon)}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, var(--md-sys-color-primary));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}@keyframes toolbarOut{0%{opacity:1;transform:translateY(-100%) scale(1)}to{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:var(--md-sys-color-surface-container-low)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:var(--md-sys-color-surface-container-lowest);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:var(--md-sys-color-error-container);border-color:var(--md-sys-color-error)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CanvasToolbarComponent, isStandalone: true, selector: "praxis-canvas-toolbar", inputs: { selectedElement: "selectedElement" }, outputs: { editMetadata: "editMetadata", delete: "delete", moveUp: "moveUp", moveDown: "moveDown", selectPath: "selectPath", requestClose: "requestClose", toggleReadonly: "toggleReadonly", toggleRequired: "toggleRequired", toggleHidden: "toggleHidden", toggleDisabled: "toggleDisabled" }, host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, ngImport: i0, template: "<div class=\"canvas-toolbar-container\" [class.closing]=\"closing\" role=\"toolbar\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.ariaLabel', 'Toolbar de configura\u00E7\u00E3o do canvas')\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    praxisIconButton=\"close\"\n    size=\"dense\"\n    (click)=\"triggerClose()\"\n    [matTooltip]=\"tx('dynamicForm.canvasToolbar.close.tooltip', 'Fechar')\"\n    [matTooltipShowDelay]=\"300\"\n    [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.close.ariaLabel', 'Fechar toolbar')\"\n  >\n  </button>\n  <div class=\"toolbar-surface\">\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.breadcrumb.ariaLabel', 'Caminho do formul\u00E1rio')\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.move', 'Mover')\">\n        <button type=\"button\" praxisIconButton=\"arrow_upward\" size=\"dense\" (click)=\"moveUp.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.moveUp', 'Mover para cima')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.moveUp', 'Mover para cima')\">\n        </button>\n        <button type=\"button\" praxisIconButton=\"arrow_downward\" size=\"dense\" (click)=\"moveDown.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.moveDown', 'Mover para baixo')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.moveDown', 'Mover para baixo')\">\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.config', 'Configura\u00E7\u00E3o')\">\n        <button\n          type=\"button\"\n          praxisIconButton=\"tune\"\n          size=\"dense\"\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.visibility', 'Visibilidade e estados')\">\n        <button type=\"button\" [praxisIconButton]=\"readonlyIcon\" size=\"dense\" (click)=\"toggleReadonly.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleReadonly', 'Alternar somente leitura')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleReadonly', 'Alternar somente leitura')\">\n        </button>\n        <button type=\"button\" [praxisIconButton]=\"visibilityIcon\" size=\"dense\" (click)=\"toggleHidden.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleVisibility', 'Alternar visibilidade')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleVisibility', 'Alternar visibilidade')\">\n        </button>\n        <button type=\"button\" [praxisIconButton]=\"disabledIcon\" size=\"dense\" (click)=\"toggleDisabled.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleDisabled', 'Alternar desabilitado')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleDisabled', 'Alternar desabilitado')\">\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.validation', 'Valida\u00E7\u00E3o')\">\n        <button type=\"button\" [praxisIconButton]=\"requiredIcon\" size=\"dense\" (click)=\"toggleRequired.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleRequired', 'Alternar obrigat\u00F3rio')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleRequired', 'Alternar obrigat\u00F3rio')\">\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.danger', 'A\u00E7\u00F5es perigosas')\">\n      <button type=\"button\" class=\"danger-action\" praxisIconButton=\"delete\" size=\"dense\" (click)=\"delete.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.remove', 'Remover')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.remove', 'Remover')\">\n      </button>\n    </div>\n  </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:var(--praxis-layer-authoring-toolbar, 340);pointer-events:none;--canvas-primary: var( --md-sys-color-primary, var(--md-sys-color-primary) );--canvas-surface: var( --md-sys-color-surface, var(--md-sys-color-surface) );--canvas-on-surface: var( --md-sys-color-on-surface, var(--md-sys-color-on-surface) );--canvas-error: var( --md-sys-color-error, var(--md-sys-color-error) );--canvas-border-color: var(--pfx-surface-border, var(--md-sys-color-outline-variant));--primary: var(--md-sys-color-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--md-sys-color-on-primary);--surface: var(--md-sys-color-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --md-sys-color-surface-variant, var(--md-sys-color-surface-variant) );--on-surface-variant: var( --md-sys-color-on-surface-variant, var(--md-sys-color-on-surface-variant) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: var(--md-sys-color-outline-variant);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: var(--md-sys-color-surface-container-low)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:var(--md-sys-elevation-level3);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;overflow:visible;animation:toolbarIn .14s ease-out}.toolbar-surface{display:grid;grid-template-rows:auto auto;border-radius:inherit;overflow:hidden;background:var(--md-sys-color-surface-container-low)}.canvas-toolbar-container.closing{pointer-events:none;animation:toolbarOut .14s ease-in forwards}.toolbar-close{position:absolute;top:-18px;right:-18px;z-index:10;pointer-events:auto;background:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--md-sys-elevation-level1);color:var(--md-sys-color-on-surface);opacity:0;pointer-events:none;transition:background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .12s ease}.canvas-toolbar-container:hover .toolbar-close,.canvas-toolbar-container:focus-within .toolbar-close,.toolbar-close:focus-visible,.canvas-toolbar-container.closing .toolbar-close{opacity:1;pointer-events:auto}.toolbar-close:hover{background:var(--md-sys-color-surface-container-high);box-shadow:var(--md-sys-elevation-level2)}.toolbar-close:active{transform:scale(.98)}.toolbar-close:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, var(--md-sys-color-primary));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}@keyframes toolbarOut{0%{opacity:1;transform:translateY(-100%) scale(1)}to{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:var(--md-sys-color-surface-container-low)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:var(--md-sys-color-surface-container-lowest);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:var(--md-sys-color-error-container);border-color:var(--md-sys-color-error)}.actions-row .praxis-icon-button{color:var(--canvas-on-surface)}.actions-row .danger-action{color:var(--canvas-error)}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CanvasToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-canvas-toolbar', standalone: true, imports: [MatButtonModule, MatIconModule, MatTooltipModule], template: "<div class=\"canvas-toolbar-container\" [class.closing]=\"closing\" role=\"toolbar\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.ariaLabel', 'Toolbar de configura\u00E7\u00E3o do canvas')\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    mat-icon-button\n    (click)=\"triggerClose()\"\n    [matTooltip]=\"tx('dynamicForm.canvasToolbar.close.tooltip', 'Fechar')\"\n    [matTooltipShowDelay]=\"300\"\n    [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.close.ariaLabel', 'Fechar toolbar')\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  <div class=\"toolbar-surface\">\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.breadcrumb.ariaLabel', 'Caminho do formul\u00E1rio')\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.move', 'Mover')\">\n        <button type=\"button\" mat-icon-button (click)=\"moveUp.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.moveUp', 'Mover para cima')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.moveUp', 'Mover para cima')\">\n          <mat-icon>arrow_upward</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"moveDown.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.moveDown', 'Mover para baixo')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.moveDown', 'Mover para baixo')\">\n          <mat-icon>arrow_downward</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.config', 'Configura\u00E7\u00E3o')\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n          <mat-icon>tune</mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.visibility', 'Visibilidade e estados')\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleReadonly.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleReadonly', 'Alternar somente leitura')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleReadonly', 'Alternar somente leitura')\">\n          <mat-icon>{{ readonlyIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleHidden.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleVisibility', 'Alternar visibilidade')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleVisibility', 'Alternar visibilidade')\">\n          <mat-icon>{{ visibilityIcon }}</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button (click)=\"toggleDisabled.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleDisabled', 'Alternar desabilitado')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleDisabled', 'Alternar desabilitado')\">\n          <mat-icon>{{ disabledIcon }}</mat-icon>\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.validation', 'Valida\u00E7\u00E3o')\">\n        <button type=\"button\" mat-icon-button (click)=\"toggleRequired.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleRequired', 'Alternar obrigat\u00F3rio')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleRequired', 'Alternar obrigat\u00F3rio')\">\n          <mat-icon>{{ requiredIcon }}</mat-icon>\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.danger', 'A\u00E7\u00F5es perigosas')\">\n      <button type=\"button\" mat-icon-button color=\"warn\" (click)=\"delete.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.remove', 'Remover')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.remove', 'Remover')\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:var(--praxis-layer-authoring-toolbar, 340);pointer-events:none;--canvas-primary: var( --md-sys-color-primary, var(--md-sys-color-primary) );--canvas-surface: var( --md-sys-color-surface, var(--md-sys-color-surface) );--canvas-on-surface: var( --md-sys-color-on-surface, var(--md-sys-color-on-surface) );--canvas-error: var( --md-sys-color-error, var(--md-sys-color-error) );--canvas-border-color: var(--pfx-surface-border, var(--md-sys-color-outline-variant));--primary: var(--md-sys-color-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--md-sys-color-on-primary);--surface: var(--md-sys-color-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --md-sys-color-surface-variant, var(--md-sys-color-surface-variant) );--on-surface-variant: var( --md-sys-color-on-surface-variant, var(--md-sys-color-on-surface-variant) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: var(--md-sys-color-outline-variant);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: var(--md-sys-color-surface-container-low)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:var(--md-sys-elevation-level3);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;overflow:visible;animation:toolbarIn .14s ease-out}.toolbar-surface{display:grid;grid-template-rows:auto auto;border-radius:inherit;overflow:hidden;background:var(--md-sys-color-surface-container-low)}.canvas-toolbar-container.closing{pointer-events:none;animation:toolbarOut .14s ease-in forwards}.toolbar-close{--p-close-size: 36px;--p-close-icon: 20px;position:absolute;top:-18px;right:-18px;z-index:10;width:var(--p-close-size);height:var(--p-close-size);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;background:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--md-sys-elevation-level1);color:var(--md-sys-color-on-surface);--mdc-icon-button-state-layer-size: calc(var(--p-close-size) + 4px);opacity:0;pointer-events:none;transition:background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .12s ease}.canvas-toolbar-container:hover .toolbar-close,.canvas-toolbar-container:focus-within .toolbar-close,.toolbar-close:focus-visible,.canvas-toolbar-container.closing .toolbar-close{opacity:1;pointer-events:auto}.toolbar-close:hover{background:var(--md-sys-color-surface-container-high);box-shadow:var(--md-sys-elevation-level2)}.toolbar-close:active{transform:scale(.98)}.toolbar-close:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.toolbar-close .mat-icon{width:var(--p-close-icon);height:var(--p-close-icon);font-size:var(--p-close-icon);line-height:var(--p-close-icon)}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, var(--md-sys-color-primary));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}@keyframes toolbarOut{0%{opacity:1;transform:translateY(-100%) scale(1)}to{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:var(--md-sys-color-surface-container-low)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:var(--md-sys-color-surface-container-lowest);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:var(--md-sys-color-error-container);border-color:var(--md-sys-color-error)}.actions-row button{width:32px;height:32px;line-height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--canvas-on-surface)}.actions-row mat-icon{font-size:18px;width:18px;height:18px;line-height:1}\n"] }]
+            args: [{ selector: 'praxis-canvas-toolbar', standalone: true, imports: [MatTooltipModule, PraxisIconButtonComponent], template: "<div class=\"canvas-toolbar-container\" [class.closing]=\"closing\" role=\"toolbar\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.ariaLabel', 'Toolbar de configura\u00E7\u00E3o do canvas')\">\n  <!-- Bot\u00E3o discreto para fechar a toolbar -->\n  <button\n    type=\"button\"\n    class=\"toolbar-close\"\n    praxisIconButton=\"close\"\n    size=\"dense\"\n    (click)=\"triggerClose()\"\n    [matTooltip]=\"tx('dynamicForm.canvasToolbar.close.tooltip', 'Fechar')\"\n    [matTooltipShowDelay]=\"300\"\n    [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.close.ariaLabel', 'Fechar toolbar')\"\n  >\n  </button>\n  <div class=\"toolbar-surface\">\n  <!-- Breadcrumb em linha superior, discreto -->\n  <div class=\"breadcrumb-row\">\n    <div class=\"pfx-breadcrumb\" role=\"navigation\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.breadcrumb.ariaLabel', 'Caminho do formul\u00E1rio')\">\n      @for (part of selectedElement?.path; track part.type + part.name; let i = $index; let isLast = $last) {\n        @if (!isLast) {\n          <button\n            type=\"button\"\n            class=\"pfx-bc is-link breadcrumb-link\"\n            (click)=\"selectPath.emit(part)\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            [attr.aria-current]=\"null\"\n          >\n            {{ part.name }}\n          </button>\n        } @else {\n          <span\n            class=\"pfx-bc is-active breadcrumb-current\"\n            [style.zIndex]=\"(selectedElement?.path?.length ?? 0) - i\"\n            aria-current=\"page\"\n          >\n            {{ part.name }}\n          </span>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Barra de a\u00E7\u00F5es separada em grupos l\u00F3gicos -->\n  <div class=\"actions-row\">\n    @if (isSection) {\n      <div class=\"action-group group-move\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.move', 'Mover')\">\n        <button type=\"button\" praxisIconButton=\"arrow_upward\" size=\"dense\" (click)=\"moveUp.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.moveUp', 'Mover para cima')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.moveUp', 'Mover para cima')\">\n        </button>\n        <button type=\"button\" praxisIconButton=\"arrow_downward\" size=\"dense\" (click)=\"moveDown.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.moveDown', 'Mover para baixo')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.moveDown', 'Mover para baixo')\">\n        </button>\n      </div>\n    }\n\n    <!-- Configura\u00E7\u00E3o para qualquer elemento selecionado (se\u00E7\u00E3o/linha/coluna/campo) -->\n    @if (selectedLastType && selectedLastType !== 'actions') {\n      <div class=\"action-group group-config\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.config', 'Configura\u00E7\u00E3o')\">\n        <button\n          type=\"button\"\n          praxisIconButton=\"tune\"\n          size=\"dense\"\n          (click)=\"editMetadata.emit()\"\n          [matTooltip]=\"configTooltip\"\n          [matTooltipShowDelay]=\"300\"\n          [attr.aria-label]=\"configTooltip\"\n        >\n        </button>\n      </div>\n    }\n\n    @if (isField) {\n      <!-- Visibilidade e estados -->\n      <div class=\"action-group group-visibility\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.visibility', 'Visibilidade e estados')\">\n        <button type=\"button\" [praxisIconButton]=\"readonlyIcon\" size=\"dense\" (click)=\"toggleReadonly.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleReadonly', 'Alternar somente leitura')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleReadonly', 'Alternar somente leitura')\">\n        </button>\n        <button type=\"button\" [praxisIconButton]=\"visibilityIcon\" size=\"dense\" (click)=\"toggleHidden.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleVisibility', 'Alternar visibilidade')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleVisibility', 'Alternar visibilidade')\">\n        </button>\n        <button type=\"button\" [praxisIconButton]=\"disabledIcon\" size=\"dense\" (click)=\"toggleDisabled.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleDisabled', 'Alternar desabilitado')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleDisabled', 'Alternar desabilitado')\">\n        </button>\n      </div>\n\n      <!-- Valida\u00E7\u00E3o / Obrigat\u00F3rio -->\n      <div class=\"action-group group-validation\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.validation', 'Valida\u00E7\u00E3o')\">\n        <button type=\"button\" [praxisIconButton]=\"requiredIcon\" size=\"dense\" (click)=\"toggleRequired.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.toggleRequired', 'Alternar obrigat\u00F3rio')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.toggleRequired', 'Alternar obrigat\u00F3rio')\">\n        </button>\n      </div>\n    }\n\n    <!-- A\u00E7\u00E3o destrutiva isolada -->\n    <div class=\"action-group group-danger\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.groups.danger', 'A\u00E7\u00F5es perigosas')\">\n      <button type=\"button\" class=\"danger-action\" praxisIconButton=\"delete\" size=\"dense\" (click)=\"delete.emit()\" [matTooltip]=\"tx('dynamicForm.canvasToolbar.actions.remove', 'Remover')\" [matTooltipShowDelay]=\"300\" [attr.aria-label]=\"tx('dynamicForm.canvasToolbar.actions.remove', 'Remover')\">\n      </button>\n    </div>\n  </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;top:0;left:0;z-index:var(--praxis-layer-authoring-toolbar, 340);pointer-events:none;--canvas-primary: var( --md-sys-color-primary, var(--md-sys-color-primary) );--canvas-surface: var( --md-sys-color-surface, var(--md-sys-color-surface) );--canvas-on-surface: var( --md-sys-color-on-surface, var(--md-sys-color-on-surface) );--canvas-error: var( --md-sys-color-error, var(--md-sys-color-error) );--canvas-border-color: var(--pfx-surface-border, var(--md-sys-color-outline-variant));--primary: var(--md-sys-color-primary, var(--md-sys-color-primary, var(--canvas-primary)));--on-primary: var(--md-sys-color-on-primary);--surface: var(--md-sys-color-surface, var(--md-sys-color-surface, var(--canvas-surface)));--surface-variant: var( --md-sys-color-surface-variant, var(--md-sys-color-surface-variant) );--on-surface-variant: var( --md-sys-color-on-surface-variant, var(--md-sys-color-on-surface-variant) );--bc-h: 28px;--bc-aw: 18px;--bc-divider: var(--md-sys-color-outline-variant);--bc-bg: var(--surface-variant);--bc-fg: var(--on-surface-variant);--bc-active-bg: var(--primary);--bc-active-fg: var(--on-primary);--bc-label-inset: 24px;--bc-bg-tone-1: var(--bc-bg);--bc-bg-tone-2: var(--md-sys-color-surface-container-low)}.canvas-toolbar-container{display:grid;grid-template-rows:auto auto;align-items:stretch;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--canvas-on-surface);border-radius:10px;box-shadow:var(--md-sys-elevation-level3);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;pointer-events:all;transform:translateY(-100%);margin-top:-6px;position:relative;overflow:visible;animation:toolbarIn .14s ease-out}.toolbar-surface{display:grid;grid-template-rows:auto auto;border-radius:inherit;overflow:hidden;background:var(--md-sys-color-surface-container-low)}.canvas-toolbar-container.closing{pointer-events:none;animation:toolbarOut .14s ease-in forwards}.toolbar-close{position:absolute;top:-18px;right:-18px;z-index:10;pointer-events:auto;background:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--md-sys-elevation-level1);color:var(--md-sys-color-on-surface);opacity:0;pointer-events:none;transition:background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .12s ease}.canvas-toolbar-container:hover .toolbar-close,.canvas-toolbar-container:focus-within .toolbar-close,.toolbar-close:focus-visible,.canvas-toolbar-container.closing .toolbar-close{opacity:1;pointer-events:auto}.toolbar-close:hover{background:var(--md-sys-color-surface-container-high);box-shadow:var(--md-sys-elevation-level2)}.toolbar-close:active{transform:scale(.98)}.toolbar-close:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.canvas-toolbar-container{border:2px solid transparent;background:var(--md-sys-color-surface-container-low);border-color:var(--md-sys-color-primary)}.canvas-toolbar-container:after{display:none}}.canvas-toolbar-container:after{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--p-primary-gradient, var(--md-sys-color-primary));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes toolbarIn{0%{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}to{opacity:1;transform:translateY(-100%) scale(1)}}@keyframes toolbarOut{0%{opacity:1;transform:translateY(-100%) scale(1)}to{opacity:0;transform:translateY(calc(-100% - 4px)) scale(.98)}}.breadcrumb-row{display:flex;align-items:center;min-height:22px;padding-block:2px;padding-inline:8px calc(8px + var(--bc-aw, 18px));border-bottom:0;background:var(--surface)}.breadcrumb-bar{display:flex;align-items:center;white-space:nowrap}.breadcrumb-separator{display:none}.actions-row{display:flex;align-items:center;padding:4px;gap:6px;background:var(--md-sys-color-surface-container-low)}.action-group{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:6px;background:var(--md-sys-color-surface-container-lowest);border:0}.pfx-breadcrumb{display:flex;align-items:center;white-space:nowrap;font-size:.85rem;line-height:1}.pfx-bc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:max-content;height:var(--bc-h, 28px);padding-inline:16px 14px;padding-inline-start:calc(var(--bc-label-inset, 24px) + var(--bc-aw, 18px));margin-inline-end:calc(-1 * var(--bc-aw, 18px));--bc-bg-local: var(--bc-bg, var(--surface-variant));background:var(--bc-bg-local);color:var(--bc-fg, var(--on-surface-variant));border:0;border-radius:6px 0 0 6px;box-shadow:none!important;outline:0;background-clip:padding-box;cursor:default}.pfx-bc:after{content:\"\";position:absolute;top:0;bottom:0;right:calc(-1 * var(--bc-aw, 18px));border-top:calc(var(--bc-h, 28px) / 2) solid transparent;border-bottom:calc(var(--bc-h, 28px) / 2) solid transparent;border-left:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(-1px);pointer-events:none}.pfx-bc:before{display:none}.pfx-bc.is-link{cursor:pointer}.pfx-bc.is-link:hover{background:var(--surface)}.pfx-bc.is-link:hover:after{border-left-color:var(--surface)}.pfx-bc.is-active{background:var(--bc-active-bg, var(--primary));color:var(--bc-active-fg, var(--on-primary));cursor:default;font-weight:600;margin-inline-end:0;border-radius:6px 0 0 6px}.pfx-bc.is-active:after{border-left-color:var(--bc-active-bg, var(--primary))}.pfx-bc:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.pfx-bc:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;padding-inline-start:16px}.pfx-bc:not(.is-active):nth-child(odd){--bc-bg-local: var(--bc-bg-tone-1)}.pfx-bc:not(.is-active):nth-child(2n){--bc-bg-local: var(--bc-bg-tone-2)}[dir=rtl] .pfx-bc{margin-inline-end:0;margin-inline-start:calc(-1 * var(--bc-aw, 18px))}[dir=rtl] .pfx-bc.is-active{margin-inline-start:0}[dir=rtl] .pfx-bc:after{right:auto;left:calc(-1 * var(--bc-aw, 18px));border-left:0;border-right:var(--bc-aw, 18px) solid var(--bc-bg-local);transform:translate(1px)}[dir=rtl] .pfx-bc.is-active:after{border-right-color:var(--bc-active-bg, var(--primary))}[dir=rtl] .pfx-bc:before{right:auto;left:calc(-1px - var(--bc-aw, 18px))}.action-group+.action-group{margin-left:4px}.group-danger{margin-left:8px;background:var(--md-sys-color-error-container);border-color:var(--md-sys-color-error)}.actions-row .praxis-icon-button{color:var(--canvas-on-surface)}.actions-row .danger-action{color:var(--canvas-error)}\n"] }]
         }], propDecorators: { selectedElement: [{
                 type: Input
             }], editMetadata: [{
@@ -2097,7 +2097,7 @@ class PraxisFormActionsComponent {
         return actionId === 'cancel' || actionId === 'reset';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisFormActionsComponent, deps: [{ token: i1$1.KeyboardShortcutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisFormActionsComponent, isStandalone: true, selector: "praxis-form-actions", inputs: { actions: "actions", editorialVisualContext: "editorialVisualContext", isSubmitting: "isSubmitting", formIsValid: "formIsValid", submitError: "submitError", invalidRequiredFieldLabels: "invalidRequiredFieldLabels", suppressInvalidSubmitHint: "suppressInvalidSubmitHint", formId: "formId", actionOverrides: "actionOverrides" }, outputs: { action: "action" }, providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"form-actions\"\n  [ngClass]=\"viewClassMap\"\n  [ngStyle]=\"actions?.containerStyles\"\n>\n  @if (submitError) {\n    <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n      <div>\n        <h4 class=\"alert__title\">Erro ao salvar</h4>\n        <p class=\"alert__text\">{{ submitError }}</p>\n      </div>\n    </div>\n  }\n  @if (shouldShowInvalidSubmitHint()) {\n    <div class=\"form-actions__hint\" role=\"status\" aria-live=\"polite\">\n      <mat-icon class=\"form-actions__hint-icon\" aria-hidden=\"true\">info</mat-icon>\n      <span>{{ getInvalidSubmitHint() }}</span>\n    </div>\n  }\n  <div class=\"desktop-actions\">\n    @if (isSplitLayout()) {\n      <div class=\"desktop-actions-group secondary-group\">\n        @for (button of getSecondaryButtons(); track button.id) {\n          @if (button.visible) {\n            @switch (button.variant || 'raised') {\n              @case ('stroked') {\n                <button mat-stroked-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @default {\n                <button mat-raised-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n      <div class=\"desktop-actions-group primary-group\">\n        @for (button of getPrimaryButtons(); track button.id) {\n          @if (button.visible) {\n            @switch (button.variant || 'raised') {\n              @case ('stroked') {\n                <button mat-stroked-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @default {\n                <button mat-raised-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n    } @else {\n      @for (button of getActionButtons(); track button.id) {\n        @if (button.visible) {\n          @switch (button.variant || 'raised') {\n            @case ('stroked') {\n              <button mat-stroked-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @case ('flat') {\n              <button mat-flat-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @case ('fab') {\n              <button mat-fab\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @default {\n              <button mat-raised-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    }\n  </div>\n  @if (actions?.mobile?.collapseToMenu) {\n    <div class=\"mobile-actions\">\n      @for (button of getVisibleButtons(); track button.id) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n      @if (getCollapsedButtons().length > 0) {\n        <button\n          mat-icon-button\n          [matMenuTriggerFor]=\"actionsMenu\"\n          aria-label=\"More actions\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #actionsMenu=\"matMenu\">\n          @for (button of getCollapsedButtons(); track button.id) {\n            <button\n              mat-menu-item\n              (click)=\"onActionButtonClick(button, $event)\"\n              [disabled]=\"isActionButtonDisabled(button)\"\n              [ngClass]=\"getButtonNgClass(button)\"\n              [ngStyle]=\"getButtonStyles(button)\"\n            >\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.1rem;z-index:1;font-family:inherit;border-radius:18px;background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%));border:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.with-divider{border-top:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}:host([data-actions-placement=afterSections]) .form-actions{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px);background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%))}:host([data-actions-placement=afterSections]) .form-actions.with-divider{border-top-color:var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit)}.form-actions.editorial-visual-context.with-divider{border-top:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant)) 72%,transparent)}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions__hint{display:inline-flex;align-items:center;gap:.45rem;max-width:min(100%,32rem);padding:.5rem .65rem;border-radius:8px;font-size:.84rem;line-height:1.25;color:var(--md-sys-color-on-secondary-container);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-secondary-container) 82%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary-container) 44%,transparent));border:1px solid color-mix(in srgb,var(--md-sys-color-secondary) 22%,transparent)}.form-actions__hint-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;line-height:18px}.form-actions.position-split .desktop-actions{width:100%;justify-content:space-between;align-items:center}.desktop-actions-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.desktop-actions-group.primary-group{justify-content:flex-end}.desktop-actions-group.secondary-group{opacity:.94}.form-actions .mdc-button{letter-spacing:.01em;border-radius:999px}.form-actions.editorial-visual-context .mdc-button{border-radius:var(--editorial-button-radius, 999px);font-family:var(--editorial-body-font-family, inherit)}.form-actions .mdc-button.size-small{min-height:36px;padding-inline:12px;font-size:.82rem}.form-actions .mdc-button.size-medium{min-height:44px;padding-inline:18px}.form-actions .mdc-button.size-large{min-height:50px;padding-inline:24px;font-size:.98rem}.form-actions .mat-mdc-raised-button,.form-actions .mat-mdc-unelevated-button{box-shadow:none}.form-actions .mat-mdc-raised-button:not([disabled]),.form-actions .mat-mdc-unelevated-button:not([disabled]){--mdc-protected-button-container-color: var(--md-sys-color-primary);--mdc-protected-button-label-text-color: var(--md-sys-color-on-primary);--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary)}.form-actions .mat-mdc-raised-button[disabled],.form-actions .mat-mdc-unelevated-button[disabled]{opacity:.55}.form-actions .mat-mdc-outlined-button,.form-actions .mat-mdc-button-base.mat-mdc-outlined-button{background:transparent}.form-actions.editorial-visual-context .mat-mdc-raised-button,.form-actions.editorial-visual-context .mat-mdc-unelevated-button{--mdc-protected-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-protected-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-filled-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-filled-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));box-shadow:var(--editorial-floating-shadow, var(--editorial-card-shadow, none))}.form-actions.editorial-visual-context .mat-mdc-outlined-button{--mdc-outlined-button-outline-color: var(--editorial-border-color, var(--md-sys-color-outline-variant));--mdc-outlined-button-label-text-color: var( --editorial-cta-secondary-text, var(--editorial-text-primary, var(--md-sys-color-on-surface)) );background:color-mix(in srgb,var(--editorial-cta-secondary, var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low))) 72%,transparent)}.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-primary,.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-accent{--mdc-outlined-button-label-text-color: var(--editorial-cta-primary, var(--md-sys-color-primary));background:transparent}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media(max-width:768px){.form-actions{padding:.9rem;border-radius:16px}:host([data-actions-placement=afterSections]) .form-actions{border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px)}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisFormActionsComponent, isStandalone: true, selector: "praxis-form-actions", inputs: { actions: "actions", editorialVisualContext: "editorialVisualContext", isSubmitting: "isSubmitting", formIsValid: "formIsValid", submitError: "submitError", invalidRequiredFieldLabels: "invalidRequiredFieldLabels", suppressInvalidSubmitHint: "suppressInvalidSubmitHint", formId: "formId", actionOverrides: "actionOverrides" }, outputs: { action: "action" }, providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"form-actions\"\n  [ngClass]=\"viewClassMap\"\n  [ngStyle]=\"actions?.containerStyles\"\n>\n  @if (submitError) {\n    <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n      <div>\n        <h4 class=\"alert__title\">Erro ao salvar</h4>\n        <p class=\"alert__text\">{{ submitError }}</p>\n      </div>\n    </div>\n  }\n  @if (shouldShowInvalidSubmitHint()) {\n    <div class=\"form-actions__hint\" role=\"status\" aria-live=\"polite\">\n      <mat-icon class=\"form-actions__hint-icon\" aria-hidden=\"true\">info</mat-icon>\n      <span>{{ getInvalidSubmitHint() }}</span>\n    </div>\n  }\n  <div class=\"desktop-actions\">\n    @if (isSplitLayout()) {\n      <div class=\"desktop-actions-group secondary-group\">\n        @for (button of getSecondaryButtons(); track button.id) {\n          @if (button.visible) {\n            @switch (button.variant || 'raised') {\n              @case ('stroked') {\n                <button mat-stroked-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @default {\n                <button mat-raised-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n      <div class=\"desktop-actions-group primary-group\">\n        @for (button of getPrimaryButtons(); track button.id) {\n          @if (button.visible) {\n            @switch (button.variant || 'raised') {\n              @case ('stroked') {\n                <button mat-stroked-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @default {\n                <button mat-raised-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n    } @else {\n      @for (button of getActionButtons(); track button.id) {\n        @if (button.visible) {\n          @switch (button.variant || 'raised') {\n            @case ('stroked') {\n              <button mat-stroked-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @case ('flat') {\n              <button mat-flat-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @case ('fab') {\n              <button mat-fab\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @default {\n              <button mat-raised-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    }\n  </div>\n  @if (actions?.mobile?.collapseToMenu) {\n    <div class=\"mobile-actions\">\n      @for (button of getVisibleButtons(); track button.id) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n      @if (getCollapsedButtons().length > 0) {\n        <button\n          praxisIconButton=\"more_vert\"\n          size=\"compact\"\n          [matMenuTriggerFor]=\"actionsMenu\"\n          aria-label=\"More actions\"\n        >\n        </button>\n        <mat-menu #actionsMenu=\"matMenu\">\n          @for (button of getCollapsedButtons(); track button.id) {\n            <button\n              mat-menu-item\n              (click)=\"onActionButtonClick(button, $event)\"\n              [disabled]=\"isActionButtonDisabled(button)\"\n              [ngClass]=\"getButtonNgClass(button)\"\n              [ngStyle]=\"getButtonStyles(button)\"\n            >\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.1rem;z-index:1;font-family:inherit;border-radius:18px;background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%));border:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.with-divider{border-top:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}:host([data-actions-placement=afterSections]) .form-actions{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px);background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%))}:host([data-actions-placement=afterSections]) .form-actions.with-divider{border-top-color:var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit)}.form-actions.editorial-visual-context.with-divider{border-top:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant)) 72%,transparent)}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions__hint{display:inline-flex;align-items:center;gap:.45rem;max-width:min(100%,32rem);padding:.5rem .65rem;border-radius:8px;font-size:.84rem;line-height:1.25;color:var(--md-sys-color-on-secondary-container);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-secondary-container) 82%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary-container) 44%,transparent));border:1px solid color-mix(in srgb,var(--md-sys-color-secondary) 22%,transparent)}.form-actions__hint-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;line-height:18px}.form-actions.position-split .desktop-actions{width:100%;justify-content:space-between;align-items:center}.desktop-actions-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.desktop-actions-group.primary-group{justify-content:flex-end}.desktop-actions-group.secondary-group{opacity:.94}.form-actions .mdc-button{letter-spacing:.01em;border-radius:999px}.form-actions.editorial-visual-context .mdc-button{border-radius:var(--editorial-button-radius, 999px);font-family:var(--editorial-body-font-family, inherit)}.form-actions .mdc-button.size-small{min-height:36px;padding-inline:12px;font-size:.82rem}.form-actions .mdc-button.size-medium{min-height:44px;padding-inline:18px}.form-actions .mdc-button.size-large{min-height:50px;padding-inline:24px;font-size:.98rem}.form-actions .mat-mdc-raised-button,.form-actions .mat-mdc-unelevated-button{box-shadow:none}.form-actions .mat-mdc-raised-button:not([disabled]),.form-actions .mat-mdc-unelevated-button:not([disabled]){--mdc-protected-button-container-color: var(--md-sys-color-primary);--mdc-protected-button-label-text-color: var(--md-sys-color-on-primary);--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary)}.form-actions .mat-mdc-raised-button[disabled],.form-actions .mat-mdc-unelevated-button[disabled]{opacity:.55}.form-actions .mat-mdc-outlined-button,.form-actions .mat-mdc-button-base.mat-mdc-outlined-button{background:transparent}.form-actions.editorial-visual-context .mat-mdc-raised-button,.form-actions.editorial-visual-context .mat-mdc-unelevated-button{--mdc-protected-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-protected-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-filled-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-filled-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));box-shadow:var(--editorial-floating-shadow, var(--editorial-card-shadow, none))}.form-actions.editorial-visual-context .mat-mdc-outlined-button{--mdc-outlined-button-outline-color: var(--editorial-border-color, var(--md-sys-color-outline-variant));--mdc-outlined-button-label-text-color: var( --editorial-cta-secondary-text, var(--editorial-text-primary, var(--md-sys-color-on-surface)) );background:color-mix(in srgb,var(--editorial-cta-secondary, var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low))) 72%,transparent)}.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-primary,.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-accent{--mdc-outlined-button-label-text-color: var(--editorial-cta-primary, var(--md-sys-color-primary));background:transparent}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media(max-width:768px){.form-actions{padding:.9rem;border-radius:16px}:host([data-actions-placement=afterSections]) .form-actions{border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px)}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisFormActionsComponent, decorators: [{
             type: Component,
@@ -2107,8 +2107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatIconModule,
                         MatTooltipModule,
                         MatMenuModule,
+                        PraxisIconButtonComponent,
                         PraxisIconDirective,
-                    ], providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], template: "<div\n  class=\"form-actions\"\n  [ngClass]=\"viewClassMap\"\n  [ngStyle]=\"actions?.containerStyles\"\n>\n  @if (submitError) {\n    <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n      <div>\n        <h4 class=\"alert__title\">Erro ao salvar</h4>\n        <p class=\"alert__text\">{{ submitError }}</p>\n      </div>\n    </div>\n  }\n  @if (shouldShowInvalidSubmitHint()) {\n    <div class=\"form-actions__hint\" role=\"status\" aria-live=\"polite\">\n      <mat-icon class=\"form-actions__hint-icon\" aria-hidden=\"true\">info</mat-icon>\n      <span>{{ getInvalidSubmitHint() }}</span>\n    </div>\n  }\n  <div class=\"desktop-actions\">\n    @if (isSplitLayout()) {\n      <div class=\"desktop-actions-group secondary-group\">\n        @for (button of getSecondaryButtons(); track button.id) {\n          @if (button.visible) {\n            @switch (button.variant || 'raised') {\n              @case ('stroked') {\n                <button mat-stroked-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @default {\n                <button mat-raised-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n      <div class=\"desktop-actions-group primary-group\">\n        @for (button of getPrimaryButtons(); track button.id) {\n          @if (button.visible) {\n            @switch (button.variant || 'raised') {\n              @case ('stroked') {\n                <button mat-stroked-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @default {\n                <button mat-raised-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n    } @else {\n      @for (button of getActionButtons(); track button.id) {\n        @if (button.visible) {\n          @switch (button.variant || 'raised') {\n            @case ('stroked') {\n              <button mat-stroked-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @case ('flat') {\n              <button mat-flat-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @case ('fab') {\n              <button mat-fab\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @default {\n              <button mat-raised-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    }\n  </div>\n  @if (actions?.mobile?.collapseToMenu) {\n    <div class=\"mobile-actions\">\n      @for (button of getVisibleButtons(); track button.id) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n      @if (getCollapsedButtons().length > 0) {\n        <button\n          mat-icon-button\n          [matMenuTriggerFor]=\"actionsMenu\"\n          aria-label=\"More actions\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #actionsMenu=\"matMenu\">\n          @for (button of getCollapsedButtons(); track button.id) {\n            <button\n              mat-menu-item\n              (click)=\"onActionButtonClick(button, $event)\"\n              [disabled]=\"isActionButtonDisabled(button)\"\n              [ngClass]=\"getButtonNgClass(button)\"\n              [ngStyle]=\"getButtonStyles(button)\"\n            >\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.1rem;z-index:1;font-family:inherit;border-radius:18px;background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%));border:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.with-divider{border-top:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}:host([data-actions-placement=afterSections]) .form-actions{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px);background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%))}:host([data-actions-placement=afterSections]) .form-actions.with-divider{border-top-color:var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit)}.form-actions.editorial-visual-context.with-divider{border-top:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant)) 72%,transparent)}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions__hint{display:inline-flex;align-items:center;gap:.45rem;max-width:min(100%,32rem);padding:.5rem .65rem;border-radius:8px;font-size:.84rem;line-height:1.25;color:var(--md-sys-color-on-secondary-container);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-secondary-container) 82%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary-container) 44%,transparent));border:1px solid color-mix(in srgb,var(--md-sys-color-secondary) 22%,transparent)}.form-actions__hint-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;line-height:18px}.form-actions.position-split .desktop-actions{width:100%;justify-content:space-between;align-items:center}.desktop-actions-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.desktop-actions-group.primary-group{justify-content:flex-end}.desktop-actions-group.secondary-group{opacity:.94}.form-actions .mdc-button{letter-spacing:.01em;border-radius:999px}.form-actions.editorial-visual-context .mdc-button{border-radius:var(--editorial-button-radius, 999px);font-family:var(--editorial-body-font-family, inherit)}.form-actions .mdc-button.size-small{min-height:36px;padding-inline:12px;font-size:.82rem}.form-actions .mdc-button.size-medium{min-height:44px;padding-inline:18px}.form-actions .mdc-button.size-large{min-height:50px;padding-inline:24px;font-size:.98rem}.form-actions .mat-mdc-raised-button,.form-actions .mat-mdc-unelevated-button{box-shadow:none}.form-actions .mat-mdc-raised-button:not([disabled]),.form-actions .mat-mdc-unelevated-button:not([disabled]){--mdc-protected-button-container-color: var(--md-sys-color-primary);--mdc-protected-button-label-text-color: var(--md-sys-color-on-primary);--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary)}.form-actions .mat-mdc-raised-button[disabled],.form-actions .mat-mdc-unelevated-button[disabled]{opacity:.55}.form-actions .mat-mdc-outlined-button,.form-actions .mat-mdc-button-base.mat-mdc-outlined-button{background:transparent}.form-actions.editorial-visual-context .mat-mdc-raised-button,.form-actions.editorial-visual-context .mat-mdc-unelevated-button{--mdc-protected-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-protected-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-filled-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-filled-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));box-shadow:var(--editorial-floating-shadow, var(--editorial-card-shadow, none))}.form-actions.editorial-visual-context .mat-mdc-outlined-button{--mdc-outlined-button-outline-color: var(--editorial-border-color, var(--md-sys-color-outline-variant));--mdc-outlined-button-label-text-color: var( --editorial-cta-secondary-text, var(--editorial-text-primary, var(--md-sys-color-on-surface)) );background:color-mix(in srgb,var(--editorial-cta-secondary, var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low))) 72%,transparent)}.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-primary,.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-accent{--mdc-outlined-button-label-text-color: var(--editorial-cta-primary, var(--md-sys-color-primary));background:transparent}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media(max-width:768px){.form-actions{padding:.9rem;border-radius:16px}:host([data-actions-placement=afterSections]) .form-actions{border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px)}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"] }]
+                    ], providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], template: "<div\n  class=\"form-actions\"\n  [ngClass]=\"viewClassMap\"\n  [ngStyle]=\"actions?.containerStyles\"\n>\n  @if (submitError) {\n    <div class=\"alert alert--error\" role=\"alert\" aria-live=\"polite\">\n      <mat-icon class=\"alert__icon\" aria-hidden=\"true\">error_outline</mat-icon>\n      <div>\n        <h4 class=\"alert__title\">Erro ao salvar</h4>\n        <p class=\"alert__text\">{{ submitError }}</p>\n      </div>\n    </div>\n  }\n  @if (shouldShowInvalidSubmitHint()) {\n    <div class=\"form-actions__hint\" role=\"status\" aria-live=\"polite\">\n      <mat-icon class=\"form-actions__hint-icon\" aria-hidden=\"true\">info</mat-icon>\n      <span>{{ getInvalidSubmitHint() }}</span>\n    </div>\n  }\n  <div class=\"desktop-actions\">\n    @if (isSplitLayout()) {\n      <div class=\"desktop-actions-group secondary-group\">\n        @for (button of getSecondaryButtons(); track button.id) {\n          @if (button.visible) {\n            @switch (button.variant || 'raised') {\n              @case ('stroked') {\n                <button mat-stroked-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @default {\n                <button mat-raised-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n      <div class=\"desktop-actions-group primary-group\">\n        @for (button of getPrimaryButtons(); track button.id) {\n          @if (button.visible) {\n            @switch (button.variant || 'raised') {\n              @case ('stroked') {\n                <button mat-stroked-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n              @default {\n                <button mat-raised-button\n                  [type]=\"button.type || 'button'\"\n                  [color]=\"getMatColor(button)\"\n                  [disabled]=\"isActionButtonDisabled(button)\"\n                  [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                  [matTooltip]=\"button.tooltip\"\n                  (click)=\"onActionButtonClick(button, $event)\"\n                  [ngClass]=\"getButtonNgClass(button)\"\n                  [ngStyle]=\"getButtonStyles(button)\">\n                  @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                  @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                  <span>{{ button.label }}</span>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n    } @else {\n      @for (button of getActionButtons(); track button.id) {\n        @if (button.visible) {\n          @switch (button.variant || 'raised') {\n            @case ('stroked') {\n              <button mat-stroked-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @case ('flat') {\n              <button mat-flat-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @case ('fab') {\n              <button mat-fab\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n            @default {\n              <button mat-raised-button\n                [type]=\"button.type || 'button'\"\n                [color]=\"getMatColor(button)\"\n                [disabled]=\"isActionButtonDisabled(button)\"\n                [attr.aria-busy]=\"button.loading ? 'true' : null\"\n                [matTooltip]=\"button.tooltip\"\n                (click)=\"onActionButtonClick(button, $event)\"\n                [ngClass]=\"getButtonNgClass(button)\"\n                [ngStyle]=\"getButtonStyles(button)\">\n                @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n                @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n                <span>{{ button.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    }\n  </div>\n  @if (actions?.mobile?.collapseToMenu) {\n    <div class=\"mobile-actions\">\n      @for (button of getVisibleButtons(); track button.id) {\n        @switch (button.variant || 'raised') {\n          @case ('stroked') {\n            <button mat-stroked-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('flat') {\n            <button mat-flat-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon [praxisIcon]=\"button.icon\" aria-hidden=\"true\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @case ('fab') {\n            <button mat-fab [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n          @default {\n            <button mat-raised-button [type]=\"button.type || 'button'\" [color]=\"getMatColor(button)\" [disabled]=\"isActionButtonDisabled(button)\" [attr.aria-busy]=\"button.loading ? 'true' : null\" [matTooltip]=\"button.tooltip\" (click)=\"onActionButtonClick(button, $event)\" [attr.aria-label]=\"button.label\" [ngClass]=\"getButtonNgClass(button)\" [ngStyle]=\"getButtonStyles(button)\">\n              @if (button.loading) { <mat-icon class=\"loading-icon\" aria-hidden=\"true\">autorenew</mat-icon> }\n              @if (button.icon && !button.loading) { <mat-icon aria-hidden=\"true\">{{ button.icon }}</mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        }\n      }\n      @if (getCollapsedButtons().length > 0) {\n        <button\n          praxisIconButton=\"more_vert\"\n          size=\"compact\"\n          [matMenuTriggerFor]=\"actionsMenu\"\n          aria-label=\"More actions\"\n        >\n        </button>\n        <mat-menu #actionsMenu=\"matMenu\">\n          @for (button of getCollapsedButtons(); track button.id) {\n            <button\n              mat-menu-item\n              (click)=\"onActionButtonClick(button, $event)\"\n              [disabled]=\"isActionButtonDisabled(button)\"\n              [ngClass]=\"getButtonNgClass(button)\"\n              [ngStyle]=\"getButtonStyles(button)\"\n            >\n              @if (button.icon) { <mat-icon [praxisIcon]=\"button.icon\"></mat-icon> }\n              <span>{{ button.label }}</span>\n            </button>\n          }\n        </mat-menu>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.1rem;z-index:1;font-family:inherit;border-radius:18px;background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%));border:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.with-divider{border-top:1px solid var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}:host([data-actions-placement=afterSections]) .form-actions{margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px);background:var(--pfx-form-footer-surface, color-mix(in srgb, var(--md-sys-color-surface-container) 78%, var(--md-sys-color-surface-container-low) 22%))}:host([data-actions-placement=afterSections]) .form-actions.with-divider{border-top-color:var(--pfx-form-footer-border, color-mix(in srgb, var(--md-sys-color-outline-variant) 76%, transparent))}.form-actions.editorial-visual-context{font-family:var(--editorial-body-font-family, inherit)}.form-actions.editorial-visual-context.with-divider{border-top:var(--editorial-card-border-width, 1px) solid color-mix(in srgb,var(--editorial-border-color, var(--md-sys-color-outline-variant)) 72%,transparent)}.form-actions.sticky{position:sticky;bottom:0}.form-actions.position-left{justify-content:flex-start}.form-actions.position-center{justify-content:center}.form-actions.position-right{justify-content:flex-end}.form-actions.position-justified,.form-actions.position-split{justify-content:space-between}.form-actions.orientation-vertical .desktop-actions{display:flex;flex-direction:column}.form-actions.orientation-horizontal .desktop-actions{display:flex;flex-direction:row}.form-actions.spacing-compact{gap:.25rem}.form-actions.spacing-normal{gap:.5rem}.form-actions.spacing-spacious{gap:1rem}.form-actions.spacing-compact .desktop-actions{gap:.25rem}.form-actions.spacing-normal .desktop-actions{gap:.5rem}.form-actions.spacing-spacious .desktop-actions{gap:1rem}.form-actions.loading{pointer-events:none;opacity:.7}.mobile-actions{display:none}.desktop-actions{display:flex;flex-wrap:wrap;gap:.5rem}.form-actions__hint{display:inline-flex;align-items:center;gap:.45rem;max-width:min(100%,32rem);padding:.5rem .65rem;border-radius:8px;font-size:.84rem;line-height:1.25;color:var(--md-sys-color-on-secondary-container);background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-secondary-container) 82%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary-container) 44%,transparent));border:1px solid color-mix(in srgb,var(--md-sys-color-secondary) 22%,transparent)}.form-actions__hint-icon{flex:0 0 auto;font-size:18px;width:18px;height:18px;line-height:18px}.form-actions.position-split .desktop-actions{width:100%;justify-content:space-between;align-items:center}.desktop-actions-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.desktop-actions-group.primary-group{justify-content:flex-end}.desktop-actions-group.secondary-group{opacity:.94}.form-actions .mdc-button{letter-spacing:.01em;border-radius:999px}.form-actions.editorial-visual-context .mdc-button{border-radius:var(--editorial-button-radius, 999px);font-family:var(--editorial-body-font-family, inherit)}.form-actions .mdc-button.size-small{min-height:36px;padding-inline:12px;font-size:.82rem}.form-actions .mdc-button.size-medium{min-height:44px;padding-inline:18px}.form-actions .mdc-button.size-large{min-height:50px;padding-inline:24px;font-size:.98rem}.form-actions .mat-mdc-raised-button,.form-actions .mat-mdc-unelevated-button{box-shadow:none}.form-actions .mat-mdc-raised-button:not([disabled]),.form-actions .mat-mdc-unelevated-button:not([disabled]){--mdc-protected-button-container-color: var(--md-sys-color-primary);--mdc-protected-button-label-text-color: var(--md-sys-color-on-primary);--mdc-filled-button-container-color: var(--md-sys-color-primary);--mdc-filled-button-label-text-color: var(--md-sys-color-on-primary)}.form-actions .mat-mdc-raised-button[disabled],.form-actions .mat-mdc-unelevated-button[disabled]{opacity:.55}.form-actions .mat-mdc-outlined-button,.form-actions .mat-mdc-button-base.mat-mdc-outlined-button{background:transparent}.form-actions.editorial-visual-context .mat-mdc-raised-button,.form-actions.editorial-visual-context .mat-mdc-unelevated-button{--mdc-protected-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-protected-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));--mdc-filled-button-container-color: var(--editorial-cta-primary, var(--md-sys-color-primary));--mdc-filled-button-label-text-color: var(--editorial-cta-primary-text, var(--md-sys-color-on-primary));box-shadow:var(--editorial-floating-shadow, var(--editorial-card-shadow, none))}.form-actions.editorial-visual-context .mat-mdc-outlined-button{--mdc-outlined-button-outline-color: var(--editorial-border-color, var(--md-sys-color-outline-variant));--mdc-outlined-button-label-text-color: var( --editorial-cta-secondary-text, var(--editorial-text-primary, var(--md-sys-color-on-surface)) );background:color-mix(in srgb,var(--editorial-cta-secondary, var(--editorial-surface-secondary, var(--md-sys-color-surface-container-low))) 72%,transparent)}.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-primary,.form-actions.editorial-visual-context .mat-mdc-outlined-button.tone-accent{--mdc-outlined-button-label-text-color: var(--editorial-cta-primary, var(--md-sys-color-primary));background:transparent}.form-actions button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.form-actions button .mat-icon+span{margin-left:8px}@media(max-width:768px){.form-actions{padding:.9rem;border-radius:16px}:host([data-actions-placement=afterSections]) .form-actions{border-radius:0 0 var(--pfx-editorial-form-radius, 8px) var(--pfx-editorial-form-radius, 8px)}.form-actions.mobile-menu-active .desktop-actions{display:none}.form-actions.mobile-menu-active .mobile-actions{display:flex;align-items:center;gap:.5rem}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.KeyboardShortcutService }], propDecorators: { actions: [{
                 type: Input
             }], editorialVisualContext: [{
@@ -13657,22 +13658,6 @@ 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;
     }
@@ -19332,7 +19317,7 @@ class PraxisDynamicForm {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDynamicForm, deps: [{ token: i1.GenericCrudService }, { token: i2.HttpClient }, { token: i1$3.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: FormLayoutService }, { token: FormContextService }, { token: FormRulesService }, { token: i7.SettingsPanelService }, { token: i2$1.MatDialog }, { token: ASYNC_CONFIG_STORAGE }, { token: CONNECTION_STORAGE }, { token: i1.DynamicFormService }, { token: i9.MatSnackBar }, { token: CanvasStateService }, { token: DynamicFormLayoutService }, { token: i1.ErrorMessageService }, { token: i1.SchemaNormalizerService }, { token: i1.ComponentMetadataRegistry }, { token: i1.GlobalConfigService }, { token: i1.ComponentKeyService }, { token: i1.LoadingOrchestrator }, { token: i0.NgZone }, { token: API_URL }, { token: PRAXIS_LOADING_RENDERER, optional: true }, { token: i12.Router, optional: true }, { token: i12.ActivatedRoute, optional: true }, { token: i1.FormHooksRegistry, optional: true }, { token: FORM_HOOKS_PRESETS, optional: true }, { token: i1.LoggerService, optional: true }, { token: i1.EnterpriseRuntimeContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisDynamicForm, isStandalone: true, selector: "praxis-dynamic-form", inputs: { resourcePath: "resourcePath", resourceId: "resourceId", initialValue: "initialValue", editorialContext: "editorialContext", mode: "mode", config: "config", actions: "actions", schemaSource: "schemaSource", schemaUrl: "schemaUrl", readUrl: "readUrl", submitUrl: "submitUrl", submitMethod: "submitMethod", responseSchemaUrl: "responseSchemaUrl", apiEndpointKey: "apiEndpointKey", apiUrlEntry: "apiUrlEntry", enableCustomization: "enableCustomization", showAiAssistant: "showAiAssistant", formId: "formId", componentInstanceId: "componentInstanceId", configPersistenceStrategy: "configPersistenceStrategy", layout: "layout", generatedLayoutPreset: "generatedLayoutPreset", layoutPolicy: "layoutPolicy", backConfig: "backConfig", hooks: "hooks", removeEmptyContainersOnSave: "removeEmptyContainersOnSave", reactiveValidation: "reactiveValidation", reactiveValidationDebounceMs: "reactiveValidationDebounceMs", notifyIfOutdated: "notifyIfOutdated", snoozeMs: "snoozeMs", autoOpenSettingsOnOutdated: "autoOpenSettingsOnOutdated", readonlyModeGlobal: "readonlyModeGlobal", disabledModeGlobal: "disabledModeGlobal", presentationModeGlobal: "presentationModeGlobal", visibleGlobal: "visibleGlobal", fieldIconPolicy: "fieldIconPolicy", domainRules: "domainRules", customEndpoints: "customEndpoints" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel", formReset: "formReset", configChange: "configChange", configPatchChange: "configPatchChange", formReady: "formReady", valueChange: "valueChange", syncCompleted: "syncCompleted", initializationError: "initializationError", loadingStateChange: "loadingStateChange", enableCustomizationChange: "enableCustomizationChange", customAction: "customAction", actionConfirmation: "actionConfirmation", schemaStatusChange: "schemaStatusChange", fieldRenderError: "fieldRenderError", ruleDiagnosticsChange: "ruleDiagnosticsChange" }, providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], 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\" role=\"status\" aria-live=\"polite\" aria-label=\"Carregando formul\u00E1rio\">\n    <div class=\"form-loading-header\">\n      <mat-progress-spinner diameter=\"32\" aria-label=\"Carregando formul\u00E1rio\"></mat-progress-spinner>\n      <div class=\"form-loading-copy\">\n        <p class=\"form-loading-title\">Carregando formul\u00E1rio...</p>\n        <p class=\"form-loading-subtitle\">Preparando campos e op\u00E7\u00F5es do cadastro.</p>\n      </div>\n    </div>\n    <div class=\"form-loading-skeleton\" aria-hidden=\"true\">\n      <span class=\"form-loading-line form-loading-line-title\"></span>\n      <span class=\"form-loading-line\"></span>\n      <span class=\"form-loading-line form-loading-line-short\"></span>\n      <span class=\"form-loading-field\"></span>\n      <span class=\"form-loading-field form-loading-field-wide\"></span>\n    </div>\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      @if (showAiAssistant) {\n        <button type=\"button\" mat-icon-button (click)=\"openAiAssistant()\" [disabled]=\"isLoading\"\n          [attr.data-testid]=\"aiAssistantTriggerTestId('config-controls')\"\n          aria-label=\"Abrir copiloto semantico Praxis do formulario\"\n          matTooltip=\"Abrir copiloto sem\u00E2ntico do formul\u00E1rio\">\n          <mat-icon [praxisIcon]=\"'auto_awesome'\"></mat-icon>\n        </button>\n      }\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 && !hasExplicitSchemaUrl() && !hasRenderableConfig()) {\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    @if (enableCustomization && selectedElement) {\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        [selectedElement]=\"selectedElement\"\n      [style.transform]=\"toolbarTransform\"></praxis-canvas-toolbar>\n    }\n\n    @if (formBlocksBefore?.nodes?.length) {\n      <section class=\"form-editorial-blocks form-editorial-blocks-before\" data-editorial-placement=\"before\">\n        <praxis-rich-content\n          [document]=\"formBlocksBeforeDocument\"\n          [context]=\"getEditorialRichContentContext()\"\n          [hostCapabilities]=\"richContentHostCapabilities\"\n        ></praxis-rich-content>\n      </section>\n    }\n\n    @if (actionPlacement === 'top' && !(effectivePresentation || effectiveReadonly)) {\n      <praxis-form-actions data-actions-placement=\"top\" [actions]=\"effectiveActions\" [isSubmitting]=\"submitting\"\n        [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\" [actionOverrides]=\"actionRuleProps\"\n        [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n        [suppressInvalidSubmitHint]=\"entityHydrationPending\"\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      <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]=\"!isLastVisibleSection(section) ? 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              [class.title-only]=\"isSectionHeaderTitleOnly(section)\"\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]=\"getEffectiveSectionTitleGapBottom(section)\" [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\n                          diameter=\"16\"\n                          mode=\"indeterminate\"\n                          [attr.aria-label]=\"getSectionHeaderActionLoadingLabel(action)\"\n                        ></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                                @for (renderItem of getColumnRenderItems(column); track renderItem.id) {\n                                  @if (renderItem.kind === 'fields') {\n                                    <ng-container dynamicFieldLoader [fields]=\"getRenderableFieldsForLoader(renderItem.fields)\" [formGroup]=\"form\"\n                                      [enableExternalControlBinding]=\"true\"\n                                      [readonlyMode]=\"effectiveReadonly\"\n                                      [disabledMode]=\"effectiveDisabledMode\"\n                                      [presentationMode]=\"presentationForLoader\" [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                                      [canvasMode]=\"enableCustomization\" (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                                      (canvasMouseLeave)=\"onFieldMouseLeave($event)\" (canvasClick)=\"onFieldClick($event)\"\n                                      (canvasFocus)=\"onFieldFocus($event)\"\n                                      (renderError)=\"onFieldRenderError($event)\">\n                                    </ng-container>\n                                  } @else {\n                                    <praxis-rich-content\n                                      class=\"form-layout-rich-content\"\n                                      [ngClass]=\"renderItem.className || null\"\n                                      [ngStyle]=\"renderItem.style || null\"\n                                      [document]=\"renderItem.document\"\n                                      [layout]=\"renderItem.layout\"\n                                      [rootClassName]=\"renderItem.rootClassName || ''\"\n                                      [context]=\"getEditorialRichContentContext()\"\n                                      [hostCapabilities]=\"richContentHostCapabilities\"\n                                    ></praxis-rich-content>\n                                  }\n                                }\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 (isLastVisibleSection(section) && beforeActionsPlacement === 'insideLastSection' && formBlocksBeforeActions?.nodes?.length) {\n                    <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n                      <praxis-rich-content\n                        [document]=\"formBlocksBeforeActionsDocument\"\n                        [context]=\"getEditorialRichContentContext()\"\n                        [hostCapabilities]=\"richContentHostCapabilities\"\n                      ></praxis-rich-content>\n                    </section>\n                  }\n                  @if (actionPlacement === 'insideLastSection' && isLastVisibleSection(section) && !(effectivePresentation\n                    || effectiveReadonly)) {\n                    <praxis-form-actions data-actions-placement=\"insideLastSection\" [actions]=\"effectiveActions\"\n                      [isSubmitting]=\"submitting\" [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\"\n                      [actionOverrides]=\"actionRuleProps\" [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n                      [suppressInvalidSubmitHint]=\"entityHydrationPending\"\n                      [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\n                      diameter=\"40\"\n                      color=\"primary\"\n                      [attr.aria-label]=\"config.messages?.loading?.submit || 'Salvando formul\u00E1rio'\"\n                    ></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?.nodes?.length) {\n          <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n            <praxis-rich-content\n              [document]=\"formBlocksBeforeActionsDocument\"\n              [context]=\"getEditorialRichContentContext()\"\n              [hostCapabilities]=\"richContentHostCapabilities\"\n            ></praxis-rich-content>\n          </section>\n        }\n\n        @if (actionPlacement === 'afterSections' && !(effectivePresentation || effectiveReadonly)) {\n          <praxis-form-actions data-actions-placement=\"afterSections\" [actions]=\"effectiveActions\" [isSubmitting]=\"submitting\"\n            [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\"\n            [actionOverrides]=\"actionRuleProps\" [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n            [suppressInvalidSubmitHint]=\"entityHydrationPending\"\n            [editorialVisualContext]=\"hasEditorialVisualContext()\"\n          (action)=\"onFormAction($event)\"></praxis-form-actions>\n        }\n\n        @if (formBlocksAfter?.nodes?.length) {\n          <section class=\"form-editorial-blocks form-editorial-blocks-after\" data-editorial-placement=\"after\">\n            <praxis-rich-content\n              [document]=\"formBlocksAfterDocument\"\n              [context]=\"getEditorialRichContentContext()\"\n              [hostCapabilities]=\"richContentHostCapabilities\"\n            ></praxis-rich-content>\n          </section>\n        }\n      </form>\n      @if (showAiAssistant && !enableCustomization && mode === 'view') {\n        <div class=\"ai-floating-assistant\">\n          <button type=\"button\" mat-icon-button (click)=\"openAiAssistant()\" [disabled]=\"isLoading\"\n            [attr.data-testid]=\"aiAssistantTriggerTestId('view-floating')\"\n            aria-label=\"Abrir copiloto semantico Praxis do formulario\"\n            matTooltip=\"Pedir ajuda sobre este formul\u00E1rio\">\n            <mat-icon [praxisIcon]=\"'auto_awesome'\"></mat-icon>\n          </button>\n        </div>\n      }\n      @if (showAiAssistant && aiAssistantOpen && aiAssistantViewState) {\n        <praxis-ai-assistant-shell\n          [labels]=\"aiAssistantLabels\"\n          [mode]=\"aiAssistantViewState.mode\"\n          [state]=\"aiAssistantViewState.state\"\n          [contextItems]=\"aiAssistantViewState.contextItems\"\n          [attachments]=\"aiAssistantViewState.attachments\"\n          [messages]=\"aiAssistantViewState.messages\"\n          [quickReplies]=\"aiAssistantViewState.quickReplies\"\n          [prompt]=\"aiAssistantPrompt\"\n          [statusText]=\"aiAssistantViewState.statusText\"\n          [errorText]=\"aiAssistantViewState.errorText\"\n          [busy]=\"aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'\"\n          [canApply]=\"aiAssistantViewState.canApply\"\n          [layout]=\"aiAssistantLayout\"\n          testIdPrefix=\"dynamic-form-ai-assistant\"\n          panelTestId=\"dynamic-form-ai-assistant-panel\"\n          submitTestId=\"dynamic-form-ai-assistant-submit\"\n          applyTestId=\"dynamic-form-ai-assistant-apply\"\n          (promptChange)=\"onAiAssistantPromptChange($event)\"\n          (submitPrompt)=\"onAiAssistantSubmit($event)\"\n          (apply)=\"onAiAssistantApply()\"\n          (retryTurn)=\"onAiAssistantRetry()\"\n          (cancelTurn)=\"onAiAssistantCancel()\"\n          (quickReply)=\"onAiAssistantQuickReply($event)\"\n          (editMessage)=\"onAiAssistantEditMessage($event)\"\n          (resendMessage)=\"onAiAssistantResendMessage($event)\"\n          (layoutChange)=\"onAiAssistantLayoutChange($event)\"\n          (close)=\"closeAiAssistant()\"\n        ></praxis-ai-assistant-shell>\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:var(--praxis-layer-authoring-hover, 300)}.canvas-mode-enabled .canvas-element.selected{z-index:var(--praxis-layer-authoring-selected, 320)}.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:var(--praxis-layer-authoring-insert, 280)}.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;--pfx-editorial-form-radius: var(--pfx-form-section-radius, 8px);--pfx-editorial-form-border: var( --pfx-form-stroke, var(--pdx-color-border-subtle, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-surface: var( --pfx-form-section-surface, var(--pdx-color-surface, var(--md-sys-color-surface-container)) );--pfx-editorial-form-surface-muted: var( --pdx-color-surface-muted, var(--md-sys-color-surface-container-low) );--pfx-form-shell-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 36%, transparent );--pfx-form-section-divider: color-mix( in srgb, var(--pfx-editorial-form-border) 68%, transparent );--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 );--pfx-form-shell-padding: clamp(.9rem, 1.4vw, 1.2rem)}.form-config-controls{position:relative;top:auto;margin:0;display:flex;align-items:center;gap:.35rem;z-index:60;background:color-mix(in srgb,var(--pfx-form-shell-surface) 88%,var(--md-sys-color-surface) 12%);padding:8px var(--pfx-form-shell-padding);border:1px solid var(--pfx-form-footer-border);border-bottom-color:color-mix(in srgb,var(--pfx-form-footer-border) 72%,transparent);border-radius:var(--pfx-editorial-form-radius) var(--pfx-editorial-form-radius) 0 0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none;min-width:0;justify-content:flex-end;pointer-events:none;opacity:.96;transition:opacity .16s ease,border-color .16s ease}.form-config-controls>*{pointer-events:auto}.form-config-controls:hover,.form-config-controls:focus-within{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant) 74%)}.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 button{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:stretch;justify-content:center;padding:1.25rem;text-align:left;color:var(--md-sys-color-on-surface);gap:1rem;min-height:220px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,var(--md-sys-color-outline-variant) 86%);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent),transparent 42%),color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,var(--md-sys-color-surface) 22%);box-shadow:0 12px 28px #0f172a14}.form-loading-header{display:flex;align-items:center;gap:.85rem}.form-loading-copy{min-width:0}.form-loading p{margin:0}.form-loading-title{font-weight:700;color:var(--md-sys-color-on-surface)}.form-loading-subtitle{margin-top:.2rem;font-size:.875rem;color:var(--md-sys-color-on-surface-variant)}.form-loading-skeleton{display:grid;gap:.7rem}.form-loading-line,.form-loading-field{display:block;overflow:hidden;position:relative;border-radius:6px;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 74%,var(--md-sys-color-primary) 6%)}.form-loading-line:after,.form-loading-field:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--md-sys-color-primary) 16%,white 18%),transparent);animation:form-loading-shimmer 1.4s ease-in-out infinite}.form-loading-line{height:12px}.form-loading-line-title{width:min(42%,240px)}.form-loading-line-short{width:min(64%,360px)}.form-loading-field{height:44px}.form-loading-field-wide{height:72px}@keyframes form-loading-shimmer{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.form-loading-line:after,.form-loading-field:after{animation:none;transform:none;opacity:.28}}.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;max-width:100%;min-width:0;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( --pdx-color-surface-muted, var(--md-sys-color-surface-container-low) );--pfx-editorial-form-border: var( --pfx-form-stroke, var(--pdx-color-border-subtle, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-text: var( --pdx-color-text-primary, var(--md-sys-color-on-surface) );--pfx-editorial-form-text-muted: var( --pdx-color-text-secondary, 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( --pdx-color-primary, 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;--pdx-presentation-label-size: var(--pfx-pres-compact-label-size, .78rem);--pdx-presentation-value-size: var(--pfx-pres-compact-value-size, 1rem);--pdx-presentation-icon-size: var(--pfx-pres-icon-size, 18px);--pdx-presentation-row-gap: var(--pfx-pres-row-gap, .5rem);--pdx-presentation-column-gap: var(--pfx-pres-column-gap, .5rem);--pdx-presentation-section-gap: var(--pfx-pres-section-gap, .75rem);--pdx-presentation-label-width: var(--pfx-pres-label-width, 220px);--pdx-presentation-flag-height: var(--pfx-pres-boolean-min-height, 22px);--pdx-presentation-flag-radius: var(--pfx-pres-boolean-radius, 999px);--pdx-presentation-flag-padding: var(--pfx-pres-boolean-padding, 0 8px);--pdx-presentation-flag-active-color: var( --pfx-pres-boolean-active-color, var(--md-sys-color-primary) );--pdx-presentation-flag-active-bg: var( --pfx-pres-boolean-active-bg, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent) );--pdx-presentation-flag-inactive-color: var( --pfx-pres-boolean-inactive-color, var(--md-sys-color-on-surface-variant) );--pdx-presentation-flag-inactive-bg: var( --pfx-pres-boolean-inactive-bg, color-mix(in srgb, var(--md-sys-color-outline-variant) 34%, transparent) );--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.canvas-mode-enabled{border:1px solid var(--pfx-form-footer-border);border-radius:var(--pfx-editorial-form-radius);background:linear-gradient(180deg,color-mix(in srgb,var(--pfx-form-shell-surface) 86%,transparent),color-mix(in srgb,var(--pfx-editorial-form-surface-muted) 42%,transparent));overflow:visible}.form-config-controls+.praxis-dynamic-form.canvas-mode-enabled{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.praxis-dynamic-form.canvas-mode-enabled>.section-drop-wrapper,.praxis-dynamic-form.canvas-mode-enabled>.form-editorial-blocks{margin-inline:var(--pfx-form-shell-padding)}.praxis-dynamic-form.canvas-mode-enabled>.section-drop-wrapper:first-of-type,.praxis-dynamic-form.canvas-mode-enabled>.form-editorial-blocks:first-child{margin-top:var(--pfx-form-shell-padding)}.praxis-dynamic-form.canvas-mode-enabled>praxis-form-actions[data-actions-placement=afterSections]{display:block;margin-top:var(--pfx-form-shell-padding)}.praxis-dynamic-form.editorial-visual-context{--_pfx-editorial-host-text: var( --editorial-text-primary, var(--foreground, var(--mat-sys-on-surface, #1d1b20)) );--_pfx-editorial-host-text-muted: var( --editorial-text-secondary, var( --muted-foreground, color-mix(in srgb, var(--_pfx-editorial-host-text) 64%, transparent) ) );--_pfx-editorial-host-surface: var( --editorial-surface-primary, var(--card, var(--mat-sys-surface-container, #ffffff)) );--_pfx-editorial-host-surface-muted: var( --editorial-surface-secondary, var(--surface-dim, var(--muted, var(--mat-sys-surface-container-low, #f7f2fa))) );--_pfx-editorial-host-border: var( --editorial-border-color, var(--border, var(--mat-sys-outline-variant, #cac4d0)) );--_pfx-editorial-host-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--primary, var(--mat-sys-primary, #6750a4))) );--_pfx-editorial-host-accent-text: var( --editorial-cta-primary-text, var( --editorial-accent-contrast, var(--primary-foreground, var(--mat-sys-on-primary, #ffffff)) ) );--_pfx-editorial-host-accent-container: var( --primary-container, color-mix(in srgb, var(--_pfx-editorial-host-accent) 16%, var(--_pfx-editorial-host-surface) 84%) );--_pfx-editorial-host-accent-container-text: var( --primary-container-fg, var(--_pfx-editorial-host-accent) );font-family:var(--editorial-body-font-family, inherit);font-size:var(--editorial-body-size, 1rem);color:var(--_pfx-editorial-host-text);--pfx-editorial-form-surface: var( --editorial-surface-primary, var(--pfx-form-section-surface, var(--_pfx-editorial-host-surface)) );--pfx-editorial-form-surface-muted: var( --editorial-surface-secondary, var(--_pfx-editorial-host-surface-muted) );--pfx-editorial-form-border: var( --editorial-border-color, var(--pfx-form-stroke, var(--_pfx-editorial-host-border)) );--pfx-editorial-form-text: var( --editorial-text-primary, var(--_pfx-editorial-host-text) );--pfx-editorial-form-text-muted: var( --editorial-text-secondary, color-mix( in srgb, var(--_pfx-editorial-host-text-muted) 86%, var(--_pfx-editorial-host-text) 14% ) );--pfx-editorial-form-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--_pfx-editorial-host-accent)) );--pfx-editorial-form-accent-text: var( --editorial-cta-primary-text, var(--editorial-accent-contrast, var(--_pfx-editorial-host-accent-text)) );--pfx-editorial-form-accent-container: var(--_pfx-editorial-host-accent-container);--pfx-editorial-form-accent-container-text: var(--_pfx-editorial-host-accent-container-text);--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( --editorial-text-primary, inherit );--md-sys-color-on-surface-variant: var( --editorial-text-secondary, inherit );--md-sys-color-primary: var( --pfx-editorial-form-accent, var(--md-sys-color-primary) );--md-sys-color-primary-container: var( --pfx-editorial-form-accent-container, var(--md-sys-color-primary-container) );--md-sys-color-on-primary-container: var( --pfx-editorial-form-accent-container-text, var(--md-sys-color-on-primary-container) );--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, inherit );--mat-sys-on-surface: var( --editorial-text-primary, inherit );--mat-sys-on-surface-variant: var( --editorial-text-secondary, inherit );--mat-sys-on-surface-rgb: var( --editorial-text-primary-rgb, inherit );color:inherit;color-scheme:light}.praxis-dynamic-form.presentation-mode .form-row,.praxis-dynamic-form.readonly-mode .form-row{gap:var(--pdx-presentation-column-gap);margin-bottom:var(--pdx-presentation-row-gap)}.praxis-dynamic-form.presentation-mode{--pfx-pres-on-surface: var( --pdx-color-text-primary, var(--pfx-editorial-form-text, var(--pfx-form-label-strong, currentColor)) );--pfx-pres-on-surface-variant: var( --pdx-color-text-secondary, var( --pfx-editorial-form-text-muted, var( --pfx-form-label-muted, color-mix(in srgb, var(--pfx-pres-on-surface) 78%, transparent) ) ) )}.praxis-dynamic-form.presentation-mode .form-section,.praxis-dynamic-form.readonly-mode .form-section{padding:var(--pdx-presentation-section-gap) .875rem}.praxis-dynamic-form.pres-compact .form-row{gap:var(--pdx-presentation-column-gap, .35rem);margin-bottom:var(--pdx-presentation-row-gap, .35rem)}.praxis-dynamic-form.pres-compact .form-section{padding:var(--pdx-presentation-section-gap, .5rem) .75rem}.praxis-dynamic-form.pres-label-left .praxis-presentation{display:grid;grid-template-columns:minmax(0,var(--pfx-presentation-label-w, var(--pdx-presentation-label-width))) minmax(0,1fr);align-items:baseline;column-gap:var(--pdx-presentation-column-gap, 10px)}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:right;margin-bottom:0}@media(max-width:480px){.praxis-dynamic-form.pres-label-left .praxis-presentation{grid-template-columns:minmax(0,1fr);row-gap:4px}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:start}}.form-section{border:1px solid var(--pfx-form-section-divider);border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);max-width:100%;min-width:0;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;color:var(--pfx-editorial-form-text);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]{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{position:relative;display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:var(--pfx-form-section-heading-divider-gap, 18px)}.section-heading:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 8%,var(--pfx-form-section-divider) 46%,var(--pfx-form-section-divider) 54%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 92%,transparent 100%);border-radius:999px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%)}.section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 10px)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-inline-divider-gap, 0)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only:after{display:none}.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:var(--pfx-form-section-heading-divider-gap, 16px)}.form-section.section-appearance-step .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 16px)}:host(.pfx-form-section-divider-inline-title) .form-section.section-appearance-step .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-inline-divider-gap, 0)}.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:not(.canvas-mode-enabled)>praxis-form-actions[data-actions-placement=afterSections]{margin-top:18px}.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);max-width:100%;min-width:0;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=entityLookup],.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;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--pfx-field-gap, 10px);flex:1;max-width:100%;min-width:0;transition:all .2s ease;border-radius:4px;position:relative}.form-layout-rich-content{display:block;width:100%;max-width:100%;min-width:0;margin-bottom:var(--pfx-field-gap, 10px);color:var(--pfx-editorial-form-text-muted, var(--md-sys-color-on-surface-variant));font:var(--mdc-typography-body-medium, 400 14px/20px system-ui);overflow-wrap:anywhere}:host ::ng-deep .form-layout-rich-content .prx-rich-content-root{display:grid;gap:8px;min-width:0;max-width:100%}:host ::ng-deep .form-layout-rich-content .prx-rich-node{min-width:0;max-width:100%}:host ::ng-deep .form-layout-rich-content .prx-rich-text{color:inherit;line-height:20px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note,:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice{border:1px solid color-mix(in srgb,var(--pfx-editorial-form-accent) 12%,var(--pfx-editorial-form-border) 88%);border-left:3px solid var(--pfx-editorial-form-accent);border-radius:8px;background:color-mix(in srgb,var(--pfx-editorial-form-accent-container) 12%,var(--pfx-editorial-form-surface-muted) 88%)}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:flex-start;padding:11px 12px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note:before{content:\"info\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--pfx-editorial-form-accent);font-family:Material Symbols Outlined;font-size:20px;font-weight:400;line-height:20px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note .prx-rich-text{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice{padding:10px 12px;color:var(--pfx-editorial-form-text)}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice .prx-rich-compose{align-items:flex-start;gap:10px}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice .prx-rich-icon{color:var(--pfx-editorial-form-accent);font-size:20px;line-height:20px;margin-top:1px}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider{display:grid;grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);align-items:center;gap:10px;color:var(--pfx-editorial-form-text-muted);font:var(--mdc-typography-label-small, 600 12px/16px system-ui);text-transform:uppercase}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider:before,:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider:after{content:\"\";height:1px;background:var(--pfx-editorial-form-border)}:host ::ng-deep .form-layout-rich-content .prx-rich-card{gap:6px;padding:12px 14px;border-color:var(--pfx-editorial-form-border);border-radius:8px;background:var(--pfx-editorial-form-surface-muted);color:var(--pfx-editorial-form-text);box-shadow:none}:host ::ng-deep .form-layout-rich-content .prx-rich-card-title{color:var(--pfx-editorial-form-text);font:var(--mdc-typography-title-small, 600 14px/20px system-ui)}:host ::ng-deep .form-layout-rich-content .prx-rich-card-subtitle,:host ::ng-deep .form-layout-rich-content .prx-rich-metric-caption{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .prx-rich-card .prx-rich-text{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .prx-rich-badge{background:var(--pfx-editorial-form-accent-container);color:var(--pfx-editorial-form-accent-container-text)}.row-drop-wrapper{container-type:inline-size}.form-row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}@container (max-width: 768px){.form-row.grid-12{grid-template-columns:minmax(0,1fr)}.form-row.grid-12>.column-drop-wrapper,.form-row.grid-12>.form-column,.form-row.grid-12 .form-column{grid-column:1/-1!important;margin-left:0;width:100%;max-width:100%;min-width:0}}.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-row.grid-12{grid-template-columns:minmax(0,1fr)}.form-row.grid-12>.column-drop-wrapper,.form-row.grid-12>.form-column,.form-row.grid-12 .form-column{grid-column:1/-1!important;margin-left:0;width:100%;max-width:100%;min-width:0}.column-drop-wrapper,.row-drop-wrapper,.form-layout-rich-content,.praxis-dynamic-form .mat-mdc-form-field,.praxis-dynamic-form .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mdc-text-field{max-width:100%;min-width:0}:host ::ng-deep .praxis-dynamic-form .pfx-field-shell,:host ::ng-deep .praxis-dynamic-form .pfx-field-shell-wrapper,:host ::ng-deep .praxis-dynamic-form .pfx-field-shell-host,:host ::ng-deep .praxis-dynamic-form .mat-mdc-form-field,:host ::ng-deep .praxis-dynamic-form .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-dynamic-form .mdc-text-field{width:100%;max-width:100%;min-width:0}.form-section{padding:clamp(.75rem,4vw,1rem)}.section-heading{gap:10px;margin-bottom:16px;padding-bottom:var(--pfx-form-section-heading-divider-gap, 14px)}.section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 8px)}}.section-title{display:flex;align-items:center;gap:8px}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title{width:100%;min-width:0}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title:after{content:\"\";display:block;flex:1 1 auto;min-width:var(--pfx-form-section-title-inline-divider-min-width, 48px);height:2px;margin-left:var(--pfx-form-section-title-inline-divider-gap, 12px);pointer-events:none;background:linear-gradient(90deg,var(--pfx-form-section-divider) 0%,var(--pfx-form-section-divider) 62%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 88%,transparent 100%);border-radius:999px;-webkit-mask-image:linear-gradient(90deg,black 0%,black 72%,transparent 100%);mask-image:linear-gradient(90deg,black 0%,black 72%,transparent 100%)}:host(.pfx-form-section-divider-inline-title) .section-heading.align-center .section-title:after{display:none}@media(max-width:640px){:host(.pfx-form-section-divider-inline-title) .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 8px)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only:after{display:block}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title{width:auto}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title:after{display:none}}.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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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],[formArray],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", "canvasFocus"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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: i18.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", "invalidRequiredFieldLabels", "suppressInvalidSubmitHint", "formId", "actionOverrides"], outputs: ["action"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone", "variant", "alignment", "density", "iconContainer"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisDynamicForm, isStandalone: true, selector: "praxis-dynamic-form", inputs: { resourcePath: "resourcePath", resourceId: "resourceId", initialValue: "initialValue", editorialContext: "editorialContext", mode: "mode", config: "config", actions: "actions", schemaSource: "schemaSource", schemaUrl: "schemaUrl", readUrl: "readUrl", submitUrl: "submitUrl", submitMethod: "submitMethod", responseSchemaUrl: "responseSchemaUrl", apiEndpointKey: "apiEndpointKey", apiUrlEntry: "apiUrlEntry", enableCustomization: "enableCustomization", showAiAssistant: "showAiAssistant", formId: "formId", componentInstanceId: "componentInstanceId", configPersistenceStrategy: "configPersistenceStrategy", layout: "layout", generatedLayoutPreset: "generatedLayoutPreset", layoutPolicy: "layoutPolicy", backConfig: "backConfig", hooks: "hooks", removeEmptyContainersOnSave: "removeEmptyContainersOnSave", reactiveValidation: "reactiveValidation", reactiveValidationDebounceMs: "reactiveValidationDebounceMs", notifyIfOutdated: "notifyIfOutdated", snoozeMs: "snoozeMs", autoOpenSettingsOnOutdated: "autoOpenSettingsOnOutdated", readonlyModeGlobal: "readonlyModeGlobal", disabledModeGlobal: "disabledModeGlobal", presentationModeGlobal: "presentationModeGlobal", visibleGlobal: "visibleGlobal", fieldIconPolicy: "fieldIconPolicy", domainRules: "domainRules", customEndpoints: "customEndpoints" }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel", formReset: "formReset", configChange: "configChange", configPatchChange: "configPatchChange", formReady: "formReady", valueChange: "valueChange", syncCompleted: "syncCompleted", initializationError: "initializationError", loadingStateChange: "loadingStateChange", enableCustomizationChange: "enableCustomizationChange", customAction: "customAction", actionConfirmation: "actionConfirmation", schemaStatusChange: "schemaStatusChange", fieldRenderError: "fieldRenderError", ruleDiagnosticsChange: "ruleDiagnosticsChange" }, providers: [providePraxisI18nConfig(PRAXIS_DYNAMIC_FORM_I18N_CONFIG)], 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\" role=\"status\" aria-live=\"polite\" aria-label=\"Carregando formul\u00E1rio\">\n    <div class=\"form-loading-header\">\n      <mat-progress-spinner diameter=\"32\" aria-label=\"Carregando formul\u00E1rio\"></mat-progress-spinner>\n      <div class=\"form-loading-copy\">\n        <p class=\"form-loading-title\">Carregando formul\u00E1rio...</p>\n        <p class=\"form-loading-subtitle\">Preparando campos e op\u00E7\u00F5es do cadastro.</p>\n      </div>\n    </div>\n    <div class=\"form-loading-skeleton\" aria-hidden=\"true\">\n      <span class=\"form-loading-line form-loading-line-title\"></span>\n      <span class=\"form-loading-line\"></span>\n      <span class=\"form-loading-line form-loading-line-short\"></span>\n      <span class=\"form-loading-field\"></span>\n      <span class=\"form-loading-field form-loading-field-wide\"></span>\n    </div>\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      @if (showAiAssistant) {\n        <button type=\"button\" praxisIconButton=\"auto_awesome\" size=\"dense\" (click)=\"openAiAssistant()\" [disabled]=\"isLoading\"\n          [attr.data-testid]=\"aiAssistantTriggerTestId('config-controls')\"\n          aria-label=\"Abrir copiloto semantico Praxis do formulario\"\n          matTooltip=\"Abrir copiloto sem\u00E2ntico do formul\u00E1rio\">\n        </button>\n      }\n      <button type=\"button\" praxisIconButton=\"settings\" size=\"dense\" (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      </button>\n      <button type=\"button\" praxisIconButton=\"link_off\" size=\"dense\" (click)=\"disconnect()\" matTooltip=\"Desconectar da fonte de dados\"\n        [disabled]=\"isLoading\">\n      </button>\n    </div>\n  }\n\n  <!-- Form Content -->\n  @if (!resourcePath && !hasExplicitSchemaUrl() && !hasRenderableConfig()) {\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    @if (enableCustomization && selectedElement) {\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        [selectedElement]=\"selectedElement\"\n      [style.transform]=\"toolbarTransform\"></praxis-canvas-toolbar>\n    }\n\n    @if (formBlocksBefore?.nodes?.length) {\n      <section class=\"form-editorial-blocks form-editorial-blocks-before\" data-editorial-placement=\"before\">\n        <praxis-rich-content\n          [document]=\"formBlocksBeforeDocument\"\n          [context]=\"getEditorialRichContentContext()\"\n          [hostCapabilities]=\"richContentHostCapabilities\"\n        ></praxis-rich-content>\n      </section>\n    }\n\n    @if (actionPlacement === 'top' && !(effectivePresentation || effectiveReadonly)) {\n      <praxis-form-actions data-actions-placement=\"top\" [actions]=\"effectiveActions\" [isSubmitting]=\"submitting\"\n        [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\" [actionOverrides]=\"actionRuleProps\"\n        [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n        [suppressInvalidSubmitHint]=\"entityHydrationPending\"\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      <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]=\"!isLastVisibleSection(section) ? 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              [class.title-only]=\"isSectionHeaderTitleOnly(section)\"\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]=\"getEffectiveSectionTitleGapBottom(section)\" [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\" praxisIconButton=\"edit\" size=\"dense\" (click)=\"openSectionEditor(section, 'title')\"\n                        aria-label=\"Editar t\u00EDtulo da se\u00E7\u00E3o\" matTooltip=\"Editar t\u00EDtulo\">\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\" praxisIconButton=\"edit\" size=\"dense\"\n                        (click)=\"openSectionEditor(section, 'description')\" aria-label=\"Editar descri\u00E7\u00E3o da se\u00E7\u00E3o\"\n                        matTooltip=\"Editar descri\u00E7\u00E3o\">\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                      [praxisIconButton]=\"action.icon\"\n                      size=\"compact\"\n                      [busy]=\"action.loading\"\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                        <span class=\"section-heading-action-sr-only\">{{ getSectionHeaderActionLoadingLabel(action) }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              }\n              @if (isSectionCollapsible(section)) {\n                <button type=\"button\" class=\"section-collapse-btn\" [praxisIconButton]=\"isSectionCollapsed(section) ? 'expand_more' : 'expand_less'\" size=\"compact\"\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                </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                                @for (renderItem of getColumnRenderItems(column); track renderItem.id) {\n                                  @if (renderItem.kind === 'fields') {\n                                    <ng-container dynamicFieldLoader [fields]=\"getRenderableFieldsForLoader(renderItem.fields)\" [formGroup]=\"form\"\n                                      [enableExternalControlBinding]=\"true\"\n                                      [readonlyMode]=\"effectiveReadonly\"\n                                      [disabledMode]=\"effectiveDisabledMode\"\n                                      [presentationMode]=\"presentationForLoader\" [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                                      [canvasMode]=\"enableCustomization\" (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                                      (canvasMouseLeave)=\"onFieldMouseLeave($event)\" (canvasClick)=\"onFieldClick($event)\"\n                                      (canvasFocus)=\"onFieldFocus($event)\"\n                                      (renderError)=\"onFieldRenderError($event)\">\n                                    </ng-container>\n                                  } @else {\n                                    <praxis-rich-content\n                                      class=\"form-layout-rich-content\"\n                                      [ngClass]=\"renderItem.className || null\"\n                                      [ngStyle]=\"renderItem.style || null\"\n                                      [document]=\"renderItem.document\"\n                                      [layout]=\"renderItem.layout\"\n                                      [rootClassName]=\"renderItem.rootClassName || ''\"\n                                      [context]=\"getEditorialRichContentContext()\"\n                                      [hostCapabilities]=\"richContentHostCapabilities\"\n                                    ></praxis-rich-content>\n                                  }\n                                }\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 (isLastVisibleSection(section) && beforeActionsPlacement === 'insideLastSection' && formBlocksBeforeActions?.nodes?.length) {\n                    <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n                      <praxis-rich-content\n                        [document]=\"formBlocksBeforeActionsDocument\"\n                        [context]=\"getEditorialRichContentContext()\"\n                        [hostCapabilities]=\"richContentHostCapabilities\"\n                      ></praxis-rich-content>\n                    </section>\n                  }\n                  @if (actionPlacement === 'insideLastSection' && isLastVisibleSection(section) && !(effectivePresentation\n                    || effectiveReadonly)) {\n                    <praxis-form-actions data-actions-placement=\"insideLastSection\" [actions]=\"effectiveActions\"\n                      [isSubmitting]=\"submitting\" [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\"\n                      [actionOverrides]=\"actionRuleProps\" [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n                      [suppressInvalidSubmitHint]=\"entityHydrationPending\"\n                      [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\n                      diameter=\"40\"\n                      color=\"primary\"\n                      [attr.aria-label]=\"config.messages?.loading?.submit || 'Salvando formul\u00E1rio'\"\n                    ></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?.nodes?.length) {\n          <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n            <praxis-rich-content\n              [document]=\"formBlocksBeforeActionsDocument\"\n              [context]=\"getEditorialRichContentContext()\"\n              [hostCapabilities]=\"richContentHostCapabilities\"\n            ></praxis-rich-content>\n          </section>\n        }\n\n        @if (actionPlacement === 'afterSections' && !(effectivePresentation || effectiveReadonly)) {\n          <praxis-form-actions data-actions-placement=\"afterSections\" [actions]=\"effectiveActions\" [isSubmitting]=\"submitting\"\n            [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\"\n            [actionOverrides]=\"actionRuleProps\" [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n            [suppressInvalidSubmitHint]=\"entityHydrationPending\"\n            [editorialVisualContext]=\"hasEditorialVisualContext()\"\n          (action)=\"onFormAction($event)\"></praxis-form-actions>\n        }\n\n        @if (formBlocksAfter?.nodes?.length) {\n          <section class=\"form-editorial-blocks form-editorial-blocks-after\" data-editorial-placement=\"after\">\n            <praxis-rich-content\n              [document]=\"formBlocksAfterDocument\"\n              [context]=\"getEditorialRichContentContext()\"\n              [hostCapabilities]=\"richContentHostCapabilities\"\n            ></praxis-rich-content>\n          </section>\n        }\n      </form>\n      @if (showAiAssistant && !enableCustomization && mode === 'view') {\n        <div class=\"ai-floating-assistant\">\n          <button type=\"button\" praxisIconButton=\"auto_awesome\" size=\"compact\" (click)=\"openAiAssistant()\" [disabled]=\"isLoading\"\n            [attr.data-testid]=\"aiAssistantTriggerTestId('view-floating')\"\n            aria-label=\"Abrir copiloto semantico Praxis do formulario\"\n            matTooltip=\"Pedir ajuda sobre este formul\u00E1rio\">\n          </button>\n        </div>\n      }\n      @if (showAiAssistant && aiAssistantOpen && aiAssistantViewState) {\n        <praxis-ai-assistant-shell\n          [labels]=\"aiAssistantLabels\"\n          [mode]=\"aiAssistantViewState.mode\"\n          [state]=\"aiAssistantViewState.state\"\n          [contextItems]=\"aiAssistantViewState.contextItems\"\n          [attachments]=\"aiAssistantViewState.attachments\"\n          [messages]=\"aiAssistantViewState.messages\"\n          [quickReplies]=\"aiAssistantViewState.quickReplies\"\n          [prompt]=\"aiAssistantPrompt\"\n          [statusText]=\"aiAssistantViewState.statusText\"\n          [errorText]=\"aiAssistantViewState.errorText\"\n          [busy]=\"aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'\"\n          [canApply]=\"aiAssistantViewState.canApply\"\n          [layout]=\"aiAssistantLayout\"\n          testIdPrefix=\"dynamic-form-ai-assistant\"\n          panelTestId=\"dynamic-form-ai-assistant-panel\"\n          submitTestId=\"dynamic-form-ai-assistant-submit\"\n          applyTestId=\"dynamic-form-ai-assistant-apply\"\n          (promptChange)=\"onAiAssistantPromptChange($event)\"\n          (submitPrompt)=\"onAiAssistantSubmit($event)\"\n          (apply)=\"onAiAssistantApply()\"\n          (retryTurn)=\"onAiAssistantRetry()\"\n          (cancelTurn)=\"onAiAssistantCancel()\"\n          (quickReply)=\"onAiAssistantQuickReply($event)\"\n          (editMessage)=\"onAiAssistantEditMessage($event)\"\n          (resendMessage)=\"onAiAssistantResendMessage($event)\"\n          (layoutChange)=\"onAiAssistantLayoutChange($event)\"\n          (close)=\"closeAiAssistant()\"\n        ></praxis-ai-assistant-shell>\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:var(--praxis-layer-authoring-hover, 300)}.canvas-mode-enabled .canvas-element.selected{z-index:var(--praxis-layer-authoring-selected, 320)}.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:var(--praxis-layer-authoring-insert, 280)}.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;--pfx-editorial-form-radius: var(--pfx-form-section-radius, 8px);--pfx-editorial-form-border: var( --pfx-form-stroke, var(--pdx-color-border-subtle, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-surface: var( --pfx-form-section-surface, var(--pdx-color-surface, var(--md-sys-color-surface-container)) );--pfx-editorial-form-surface-muted: var( --pdx-color-surface-muted, var(--md-sys-color-surface-container-low) );--pfx-form-shell-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 36%, transparent );--pfx-form-section-divider: color-mix( in srgb, var(--pfx-editorial-form-border) 68%, transparent );--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 );--pfx-form-shell-padding: clamp(.9rem, 1.4vw, 1.2rem)}.form-config-controls{position:relative;top:auto;margin:0;display:flex;align-items:center;gap:.35rem;z-index:60;background:color-mix(in srgb,var(--pfx-form-shell-surface) 88%,var(--md-sys-color-surface) 12%);padding:8px var(--pfx-form-shell-padding);border:1px solid var(--pfx-form-footer-border);border-bottom-color:color-mix(in srgb,var(--pfx-form-footer-border) 72%,transparent);border-radius:var(--pfx-editorial-form-radius) var(--pfx-editorial-form-radius) 0 0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none;min-width:0;justify-content:flex-end;pointer-events:none;opacity:.96;transition:opacity .16s ease,border-color .16s ease}.form-config-controls>*{pointer-events:auto}.form-config-controls:hover,.form-config-controls:focus-within{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant) 74%)}.form-config-controls .praxis-icon-button{color:var(--md-sys-color-on-surface-variant)}.form-config-controls .praxis-icon-button:hover{color:var(--md-sys-color-primary)}.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 button{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:stretch;justify-content:center;padding:1.25rem;text-align:left;color:var(--md-sys-color-on-surface);gap:1rem;min-height:220px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,var(--md-sys-color-outline-variant) 86%);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent),transparent 42%),color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,var(--md-sys-color-surface) 22%);box-shadow:0 12px 28px #0f172a14}.form-loading-header{display:flex;align-items:center;gap:.85rem}.form-loading-copy{min-width:0}.form-loading p{margin:0}.form-loading-title{font-weight:700;color:var(--md-sys-color-on-surface)}.form-loading-subtitle{margin-top:.2rem;font-size:.875rem;color:var(--md-sys-color-on-surface-variant)}.form-loading-skeleton{display:grid;gap:.7rem}.form-loading-line,.form-loading-field{display:block;overflow:hidden;position:relative;border-radius:6px;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 74%,var(--md-sys-color-primary) 6%)}.form-loading-line:after,.form-loading-field:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--md-sys-color-primary) 16%,white 18%),transparent);animation:form-loading-shimmer 1.4s ease-in-out infinite}.form-loading-line{height:12px}.form-loading-line-title{width:min(42%,240px)}.form-loading-line-short{width:min(64%,360px)}.form-loading-field{height:44px}.form-loading-field-wide{height:72px}@keyframes form-loading-shimmer{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.form-loading-line:after,.form-loading-field:after{animation:none;transform:none;opacity:.28}}.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;max-width:100%;min-width:0;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( --pdx-color-surface-muted, var(--md-sys-color-surface-container-low) );--pfx-editorial-form-border: var( --pfx-form-stroke, var(--pdx-color-border-subtle, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-text: var( --pdx-color-text-primary, var(--md-sys-color-on-surface) );--pfx-editorial-form-text-muted: var( --pdx-color-text-secondary, 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( --pdx-color-primary, 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;--pdx-presentation-label-size: var(--pfx-pres-compact-label-size, .78rem);--pdx-presentation-value-size: var(--pfx-pres-compact-value-size, 1rem);--pdx-presentation-icon-size: var(--pfx-pres-icon-size, 18px);--pdx-presentation-row-gap: var(--pfx-pres-row-gap, .5rem);--pdx-presentation-column-gap: var(--pfx-pres-column-gap, .5rem);--pdx-presentation-section-gap: var(--pfx-pres-section-gap, .75rem);--pdx-presentation-label-width: var(--pfx-pres-label-width, 220px);--pdx-presentation-flag-height: var(--pfx-pres-boolean-min-height, 22px);--pdx-presentation-flag-radius: var(--pfx-pres-boolean-radius, 999px);--pdx-presentation-flag-padding: var(--pfx-pres-boolean-padding, 0 8px);--pdx-presentation-flag-active-color: var( --pfx-pres-boolean-active-color, var(--md-sys-color-primary) );--pdx-presentation-flag-active-bg: var( --pfx-pres-boolean-active-bg, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent) );--pdx-presentation-flag-inactive-color: var( --pfx-pres-boolean-inactive-color, var(--md-sys-color-on-surface-variant) );--pdx-presentation-flag-inactive-bg: var( --pfx-pres-boolean-inactive-bg, color-mix(in srgb, var(--md-sys-color-outline-variant) 34%, transparent) );--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.canvas-mode-enabled{border:1px solid var(--pfx-form-footer-border);border-radius:var(--pfx-editorial-form-radius);background:linear-gradient(180deg,color-mix(in srgb,var(--pfx-form-shell-surface) 86%,transparent),color-mix(in srgb,var(--pfx-editorial-form-surface-muted) 42%,transparent));overflow:visible}.form-config-controls+.praxis-dynamic-form.canvas-mode-enabled{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.praxis-dynamic-form.canvas-mode-enabled>.section-drop-wrapper,.praxis-dynamic-form.canvas-mode-enabled>.form-editorial-blocks{margin-inline:var(--pfx-form-shell-padding)}.praxis-dynamic-form.canvas-mode-enabled>.section-drop-wrapper:first-of-type,.praxis-dynamic-form.canvas-mode-enabled>.form-editorial-blocks:first-child{margin-top:var(--pfx-form-shell-padding)}.praxis-dynamic-form.canvas-mode-enabled>praxis-form-actions[data-actions-placement=afterSections]{display:block;margin-top:var(--pfx-form-shell-padding)}.praxis-dynamic-form.editorial-visual-context{--_pfx-editorial-host-text: var( --editorial-text-primary, var(--foreground, var(--mat-sys-on-surface, #1d1b20)) );--_pfx-editorial-host-text-muted: var( --editorial-text-secondary, var( --muted-foreground, color-mix(in srgb, var(--_pfx-editorial-host-text) 64%, transparent) ) );--_pfx-editorial-host-surface: var( --editorial-surface-primary, var(--card, var(--mat-sys-surface-container, #ffffff)) );--_pfx-editorial-host-surface-muted: var( --editorial-surface-secondary, var(--surface-dim, var(--muted, var(--mat-sys-surface-container-low, #f7f2fa))) );--_pfx-editorial-host-border: var( --editorial-border-color, var(--border, var(--mat-sys-outline-variant, #cac4d0)) );--_pfx-editorial-host-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--primary, var(--mat-sys-primary, #6750a4))) );--_pfx-editorial-host-accent-text: var( --editorial-cta-primary-text, var( --editorial-accent-contrast, var(--primary-foreground, var(--mat-sys-on-primary, #ffffff)) ) );--_pfx-editorial-host-accent-container: var( --primary-container, color-mix(in srgb, var(--_pfx-editorial-host-accent) 16%, var(--_pfx-editorial-host-surface) 84%) );--_pfx-editorial-host-accent-container-text: var( --primary-container-fg, var(--_pfx-editorial-host-accent) );font-family:var(--editorial-body-font-family, inherit);font-size:var(--editorial-body-size, 1rem);color:var(--_pfx-editorial-host-text);--pfx-editorial-form-surface: var( --editorial-surface-primary, var(--pfx-form-section-surface, var(--_pfx-editorial-host-surface)) );--pfx-editorial-form-surface-muted: var( --editorial-surface-secondary, var(--_pfx-editorial-host-surface-muted) );--pfx-editorial-form-border: var( --editorial-border-color, var(--pfx-form-stroke, var(--_pfx-editorial-host-border)) );--pfx-editorial-form-text: var( --editorial-text-primary, var(--_pfx-editorial-host-text) );--pfx-editorial-form-text-muted: var( --editorial-text-secondary, color-mix( in srgb, var(--_pfx-editorial-host-text-muted) 86%, var(--_pfx-editorial-host-text) 14% ) );--pfx-editorial-form-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--_pfx-editorial-host-accent)) );--pfx-editorial-form-accent-text: var( --editorial-cta-primary-text, var(--editorial-accent-contrast, var(--_pfx-editorial-host-accent-text)) );--pfx-editorial-form-accent-container: var(--_pfx-editorial-host-accent-container);--pfx-editorial-form-accent-container-text: var(--_pfx-editorial-host-accent-container-text);--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( --editorial-text-primary, inherit );--md-sys-color-on-surface-variant: var( --editorial-text-secondary, inherit );--md-sys-color-primary: var( --pfx-editorial-form-accent, var(--md-sys-color-primary) );--md-sys-color-primary-container: var( --pfx-editorial-form-accent-container, var(--md-sys-color-primary-container) );--md-sys-color-on-primary-container: var( --pfx-editorial-form-accent-container-text, var(--md-sys-color-on-primary-container) );--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, inherit );--mat-sys-on-surface: var( --editorial-text-primary, inherit );--mat-sys-on-surface-variant: var( --editorial-text-secondary, inherit );--mat-sys-on-surface-rgb: var( --editorial-text-primary-rgb, inherit );color:inherit;color-scheme:light}.praxis-dynamic-form.presentation-mode .form-row,.praxis-dynamic-form.readonly-mode .form-row{gap:var(--pdx-presentation-column-gap);margin-bottom:var(--pdx-presentation-row-gap)}.praxis-dynamic-form.presentation-mode{--pfx-pres-on-surface: var( --pdx-color-text-primary, var(--pfx-editorial-form-text, var(--pfx-form-label-strong, currentColor)) );--pfx-pres-on-surface-variant: var( --pdx-color-text-secondary, var( --pfx-editorial-form-text-muted, var( --pfx-form-label-muted, color-mix(in srgb, var(--pfx-pres-on-surface) 78%, transparent) ) ) )}.praxis-dynamic-form.presentation-mode .form-section,.praxis-dynamic-form.readonly-mode .form-section{padding:var(--pdx-presentation-section-gap) .875rem}.praxis-dynamic-form.pres-compact .form-row{gap:var(--pdx-presentation-column-gap, .35rem);margin-bottom:var(--pdx-presentation-row-gap, .35rem)}.praxis-dynamic-form.pres-compact .form-section{padding:var(--pdx-presentation-section-gap, .5rem) .75rem}.praxis-dynamic-form.pres-label-left .praxis-presentation{display:grid;grid-template-columns:minmax(0,var(--pfx-presentation-label-w, var(--pdx-presentation-label-width))) minmax(0,1fr);align-items:baseline;column-gap:var(--pdx-presentation-column-gap, 10px)}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:right;margin-bottom:0}@media(max-width:480px){.praxis-dynamic-form.pres-label-left .praxis-presentation{grid-template-columns:minmax(0,1fr);row-gap:4px}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:start}}.form-section{border:1px solid var(--pfx-form-section-divider);border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);max-width:100%;min-width:0;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;color:var(--pfx-editorial-form-text);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]{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{position:relative;display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:var(--pfx-form-section-heading-divider-gap, 18px)}.section-heading:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 8%,var(--pfx-form-section-divider) 46%,var(--pfx-form-section-divider) 54%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 92%,transparent 100%);border-radius:999px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%)}.section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 10px)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-inline-divider-gap, 0)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only:after{display:none}.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.tone-primary{color:var(--md-sys-color-primary)}.section-heading-action-btn.tone-accent,.section-heading-action-btn.tone-secondary{color:var(--md-sys-color-tertiary)}.section-heading-action-btn.tone-warn,.section-heading-action-btn.tone-danger,.section-heading-action-btn.tone-error{color:var(--md-sys-color-error)}.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:var(--pfx-form-section-heading-divider-gap, 16px)}.form-section.section-appearance-step .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 16px)}:host(.pfx-form-section-divider-inline-title) .form-section.section-appearance-step .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-inline-divider-gap, 0)}.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:not(.canvas-mode-enabled)>praxis-form-actions[data-actions-placement=afterSections]{margin-top:18px}.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}.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);max-width:100%;min-width:0;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=entityLookup],.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;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--pfx-field-gap, 10px);flex:1;max-width:100%;min-width:0;transition:all .2s ease;border-radius:4px;position:relative}.form-layout-rich-content{display:block;width:100%;max-width:100%;min-width:0;margin-bottom:var(--pfx-field-gap, 10px);color:var(--pfx-editorial-form-text-muted, var(--md-sys-color-on-surface-variant));font:var(--mdc-typography-body-medium, 400 14px/20px system-ui);overflow-wrap:anywhere}:host ::ng-deep .form-layout-rich-content .prx-rich-content-root{display:grid;gap:8px;min-width:0;max-width:100%}:host ::ng-deep .form-layout-rich-content .prx-rich-node{min-width:0;max-width:100%}:host ::ng-deep .form-layout-rich-content .prx-rich-text{color:inherit;line-height:20px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note,:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice{border:1px solid color-mix(in srgb,var(--pfx-editorial-form-accent) 12%,var(--pfx-editorial-form-border) 88%);border-left:3px solid var(--pfx-editorial-form-accent);border-radius:8px;background:color-mix(in srgb,var(--pfx-editorial-form-accent-container) 12%,var(--pfx-editorial-form-surface-muted) 88%)}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:flex-start;padding:11px 12px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note:before{content:\"info\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--pfx-editorial-form-accent);font-family:Material Symbols Outlined;font-size:20px;font-weight:400;line-height:20px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note .prx-rich-text{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice{padding:10px 12px;color:var(--pfx-editorial-form-text)}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice .prx-rich-compose{align-items:flex-start;gap:10px}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice .prx-rich-icon{color:var(--pfx-editorial-form-accent);font-size:20px;line-height:20px;margin-top:1px}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider{display:grid;grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);align-items:center;gap:10px;color:var(--pfx-editorial-form-text-muted);font:var(--mdc-typography-label-small, 600 12px/16px system-ui);text-transform:uppercase}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider:before,:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider:after{content:\"\";height:1px;background:var(--pfx-editorial-form-border)}:host ::ng-deep .form-layout-rich-content .prx-rich-card{gap:6px;padding:12px 14px;border-color:var(--pfx-editorial-form-border);border-radius:8px;background:var(--pfx-editorial-form-surface-muted);color:var(--pfx-editorial-form-text);box-shadow:none}:host ::ng-deep .form-layout-rich-content .prx-rich-card-title{color:var(--pfx-editorial-form-text);font:var(--mdc-typography-title-small, 600 14px/20px system-ui)}:host ::ng-deep .form-layout-rich-content .prx-rich-card-subtitle,:host ::ng-deep .form-layout-rich-content .prx-rich-metric-caption{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .prx-rich-card .prx-rich-text{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .prx-rich-badge{background:var(--pfx-editorial-form-accent-container);color:var(--pfx-editorial-form-accent-container-text)}.row-drop-wrapper{container-type:inline-size}.form-row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}@container (max-width: 768px){.form-row.grid-12{grid-template-columns:minmax(0,1fr)}.form-row.grid-12>.column-drop-wrapper,.form-row.grid-12>.form-column,.form-row.grid-12 .form-column{grid-column:1/-1!important;margin-left:0;width:100%;max-width:100%;min-width:0}}.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-row.grid-12{grid-template-columns:minmax(0,1fr)}.form-row.grid-12>.column-drop-wrapper,.form-row.grid-12>.form-column,.form-row.grid-12 .form-column{grid-column:1/-1!important;margin-left:0;width:100%;max-width:100%;min-width:0}.column-drop-wrapper,.row-drop-wrapper,.form-layout-rich-content,.praxis-dynamic-form .mat-mdc-form-field,.praxis-dynamic-form .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mdc-text-field{max-width:100%;min-width:0}:host ::ng-deep .praxis-dynamic-form .pfx-field-shell,:host ::ng-deep .praxis-dynamic-form .pfx-field-shell-wrapper,:host ::ng-deep .praxis-dynamic-form .pfx-field-shell-host,:host ::ng-deep .praxis-dynamic-form .mat-mdc-form-field,:host ::ng-deep .praxis-dynamic-form .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-dynamic-form .mdc-text-field{width:100%;max-width:100%;min-width:0}.form-section{padding:clamp(.75rem,4vw,1rem)}.section-heading{gap:10px;margin-bottom:16px;padding-bottom:var(--pfx-form-section-heading-divider-gap, 14px)}.section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 8px)}}.section-title{display:flex;align-items:center;gap:8px}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title{width:100%;min-width:0}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title:after{content:\"\";display:block;flex:1 1 auto;min-width:var(--pfx-form-section-title-inline-divider-min-width, 48px);height:2px;margin-left:var(--pfx-form-section-title-inline-divider-gap, 12px);pointer-events:none;background:linear-gradient(90deg,var(--pfx-form-section-divider) 0%,var(--pfx-form-section-divider) 62%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 88%,transparent 100%);border-radius:999px;-webkit-mask-image:linear-gradient(90deg,black 0%,black 72%,transparent 100%);mask-image:linear-gradient(90deg,black 0%,black 72%,transparent 100%)}:host(.pfx-form-section-divider-inline-title) .section-heading.align-center .section-title:after{display:none}@media(max-width:640px){:host(.pfx-form-section-divider-inline-title) .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 8px)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only:after{display:block}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title{width:auto}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title:after{display:none}}.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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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],[formArray],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", "canvasFocus"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { 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", "invalidRequiredFieldLabels", "suppressInvalidSubmitHint", "formId", "actionOverrides"], outputs: ["action"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone", "variant", "alignment", "density", "iconContainer"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDynamicForm, decorators: [{
             type: Component,
@@ -19347,13 +19332,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatDialogModule,
                         MatSnackBarModule,
                         MatBadgeModule,
+                        PraxisIconButtonComponent,
                         PraxisIconDirective,
                         CanvasToolbarComponent,
                         PraxisFormActionsComponent,
                         EmptyStateCardComponent,
                         PraxisAiAssistantShellComponent,
                         PraxisRichContent,
-                    ], template: "@if (isLoading) {\n  <!-- Loading State -->\n  <div class=\"form-loading\" role=\"status\" aria-live=\"polite\" aria-label=\"Carregando formul\u00E1rio\">\n    <div class=\"form-loading-header\">\n      <mat-progress-spinner diameter=\"32\" aria-label=\"Carregando formul\u00E1rio\"></mat-progress-spinner>\n      <div class=\"form-loading-copy\">\n        <p class=\"form-loading-title\">Carregando formul\u00E1rio...</p>\n        <p class=\"form-loading-subtitle\">Preparando campos e op\u00E7\u00F5es do cadastro.</p>\n      </div>\n    </div>\n    <div class=\"form-loading-skeleton\" aria-hidden=\"true\">\n      <span class=\"form-loading-line form-loading-line-title\"></span>\n      <span class=\"form-loading-line\"></span>\n      <span class=\"form-loading-line form-loading-line-short\"></span>\n      <span class=\"form-loading-field\"></span>\n      <span class=\"form-loading-field form-loading-field-wide\"></span>\n    </div>\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      @if (showAiAssistant) {\n        <button type=\"button\" mat-icon-button (click)=\"openAiAssistant()\" [disabled]=\"isLoading\"\n          [attr.data-testid]=\"aiAssistantTriggerTestId('config-controls')\"\n          aria-label=\"Abrir copiloto semantico Praxis do formulario\"\n          matTooltip=\"Abrir copiloto sem\u00E2ntico do formul\u00E1rio\">\n          <mat-icon [praxisIcon]=\"'auto_awesome'\"></mat-icon>\n        </button>\n      }\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 && !hasExplicitSchemaUrl() && !hasRenderableConfig()) {\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    @if (enableCustomization && selectedElement) {\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        [selectedElement]=\"selectedElement\"\n      [style.transform]=\"toolbarTransform\"></praxis-canvas-toolbar>\n    }\n\n    @if (formBlocksBefore?.nodes?.length) {\n      <section class=\"form-editorial-blocks form-editorial-blocks-before\" data-editorial-placement=\"before\">\n        <praxis-rich-content\n          [document]=\"formBlocksBeforeDocument\"\n          [context]=\"getEditorialRichContentContext()\"\n          [hostCapabilities]=\"richContentHostCapabilities\"\n        ></praxis-rich-content>\n      </section>\n    }\n\n    @if (actionPlacement === 'top' && !(effectivePresentation || effectiveReadonly)) {\n      <praxis-form-actions data-actions-placement=\"top\" [actions]=\"effectiveActions\" [isSubmitting]=\"submitting\"\n        [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\" [actionOverrides]=\"actionRuleProps\"\n        [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n        [suppressInvalidSubmitHint]=\"entityHydrationPending\"\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      <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]=\"!isLastVisibleSection(section) ? 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              [class.title-only]=\"isSectionHeaderTitleOnly(section)\"\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]=\"getEffectiveSectionTitleGapBottom(section)\" [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\n                          diameter=\"16\"\n                          mode=\"indeterminate\"\n                          [attr.aria-label]=\"getSectionHeaderActionLoadingLabel(action)\"\n                        ></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                                @for (renderItem of getColumnRenderItems(column); track renderItem.id) {\n                                  @if (renderItem.kind === 'fields') {\n                                    <ng-container dynamicFieldLoader [fields]=\"getRenderableFieldsForLoader(renderItem.fields)\" [formGroup]=\"form\"\n                                      [enableExternalControlBinding]=\"true\"\n                                      [readonlyMode]=\"effectiveReadonly\"\n                                      [disabledMode]=\"effectiveDisabledMode\"\n                                      [presentationMode]=\"presentationForLoader\" [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                                      [canvasMode]=\"enableCustomization\" (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                                      (canvasMouseLeave)=\"onFieldMouseLeave($event)\" (canvasClick)=\"onFieldClick($event)\"\n                                      (canvasFocus)=\"onFieldFocus($event)\"\n                                      (renderError)=\"onFieldRenderError($event)\">\n                                    </ng-container>\n                                  } @else {\n                                    <praxis-rich-content\n                                      class=\"form-layout-rich-content\"\n                                      [ngClass]=\"renderItem.className || null\"\n                                      [ngStyle]=\"renderItem.style || null\"\n                                      [document]=\"renderItem.document\"\n                                      [layout]=\"renderItem.layout\"\n                                      [rootClassName]=\"renderItem.rootClassName || ''\"\n                                      [context]=\"getEditorialRichContentContext()\"\n                                      [hostCapabilities]=\"richContentHostCapabilities\"\n                                    ></praxis-rich-content>\n                                  }\n                                }\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 (isLastVisibleSection(section) && beforeActionsPlacement === 'insideLastSection' && formBlocksBeforeActions?.nodes?.length) {\n                    <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n                      <praxis-rich-content\n                        [document]=\"formBlocksBeforeActionsDocument\"\n                        [context]=\"getEditorialRichContentContext()\"\n                        [hostCapabilities]=\"richContentHostCapabilities\"\n                      ></praxis-rich-content>\n                    </section>\n                  }\n                  @if (actionPlacement === 'insideLastSection' && isLastVisibleSection(section) && !(effectivePresentation\n                    || effectiveReadonly)) {\n                    <praxis-form-actions data-actions-placement=\"insideLastSection\" [actions]=\"effectiveActions\"\n                      [isSubmitting]=\"submitting\" [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\"\n                      [actionOverrides]=\"actionRuleProps\" [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n                      [suppressInvalidSubmitHint]=\"entityHydrationPending\"\n                      [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\n                      diameter=\"40\"\n                      color=\"primary\"\n                      [attr.aria-label]=\"config.messages?.loading?.submit || 'Salvando formul\u00E1rio'\"\n                    ></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?.nodes?.length) {\n          <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n            <praxis-rich-content\n              [document]=\"formBlocksBeforeActionsDocument\"\n              [context]=\"getEditorialRichContentContext()\"\n              [hostCapabilities]=\"richContentHostCapabilities\"\n            ></praxis-rich-content>\n          </section>\n        }\n\n        @if (actionPlacement === 'afterSections' && !(effectivePresentation || effectiveReadonly)) {\n          <praxis-form-actions data-actions-placement=\"afterSections\" [actions]=\"effectiveActions\" [isSubmitting]=\"submitting\"\n            [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\"\n            [actionOverrides]=\"actionRuleProps\" [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n            [suppressInvalidSubmitHint]=\"entityHydrationPending\"\n            [editorialVisualContext]=\"hasEditorialVisualContext()\"\n          (action)=\"onFormAction($event)\"></praxis-form-actions>\n        }\n\n        @if (formBlocksAfter?.nodes?.length) {\n          <section class=\"form-editorial-blocks form-editorial-blocks-after\" data-editorial-placement=\"after\">\n            <praxis-rich-content\n              [document]=\"formBlocksAfterDocument\"\n              [context]=\"getEditorialRichContentContext()\"\n              [hostCapabilities]=\"richContentHostCapabilities\"\n            ></praxis-rich-content>\n          </section>\n        }\n      </form>\n      @if (showAiAssistant && !enableCustomization && mode === 'view') {\n        <div class=\"ai-floating-assistant\">\n          <button type=\"button\" mat-icon-button (click)=\"openAiAssistant()\" [disabled]=\"isLoading\"\n            [attr.data-testid]=\"aiAssistantTriggerTestId('view-floating')\"\n            aria-label=\"Abrir copiloto semantico Praxis do formulario\"\n            matTooltip=\"Pedir ajuda sobre este formul\u00E1rio\">\n            <mat-icon [praxisIcon]=\"'auto_awesome'\"></mat-icon>\n          </button>\n        </div>\n      }\n      @if (showAiAssistant && aiAssistantOpen && aiAssistantViewState) {\n        <praxis-ai-assistant-shell\n          [labels]=\"aiAssistantLabels\"\n          [mode]=\"aiAssistantViewState.mode\"\n          [state]=\"aiAssistantViewState.state\"\n          [contextItems]=\"aiAssistantViewState.contextItems\"\n          [attachments]=\"aiAssistantViewState.attachments\"\n          [messages]=\"aiAssistantViewState.messages\"\n          [quickReplies]=\"aiAssistantViewState.quickReplies\"\n          [prompt]=\"aiAssistantPrompt\"\n          [statusText]=\"aiAssistantViewState.statusText\"\n          [errorText]=\"aiAssistantViewState.errorText\"\n          [busy]=\"aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'\"\n          [canApply]=\"aiAssistantViewState.canApply\"\n          [layout]=\"aiAssistantLayout\"\n          testIdPrefix=\"dynamic-form-ai-assistant\"\n          panelTestId=\"dynamic-form-ai-assistant-panel\"\n          submitTestId=\"dynamic-form-ai-assistant-submit\"\n          applyTestId=\"dynamic-form-ai-assistant-apply\"\n          (promptChange)=\"onAiAssistantPromptChange($event)\"\n          (submitPrompt)=\"onAiAssistantSubmit($event)\"\n          (apply)=\"onAiAssistantApply()\"\n          (retryTurn)=\"onAiAssistantRetry()\"\n          (cancelTurn)=\"onAiAssistantCancel()\"\n          (quickReply)=\"onAiAssistantQuickReply($event)\"\n          (editMessage)=\"onAiAssistantEditMessage($event)\"\n          (resendMessage)=\"onAiAssistantResendMessage($event)\"\n          (layoutChange)=\"onAiAssistantLayoutChange($event)\"\n          (close)=\"closeAiAssistant()\"\n        ></praxis-ai-assistant-shell>\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:var(--praxis-layer-authoring-hover, 300)}.canvas-mode-enabled .canvas-element.selected{z-index:var(--praxis-layer-authoring-selected, 320)}.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:var(--praxis-layer-authoring-insert, 280)}.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;--pfx-editorial-form-radius: var(--pfx-form-section-radius, 8px);--pfx-editorial-form-border: var( --pfx-form-stroke, var(--pdx-color-border-subtle, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-surface: var( --pfx-form-section-surface, var(--pdx-color-surface, var(--md-sys-color-surface-container)) );--pfx-editorial-form-surface-muted: var( --pdx-color-surface-muted, var(--md-sys-color-surface-container-low) );--pfx-form-shell-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 36%, transparent );--pfx-form-section-divider: color-mix( in srgb, var(--pfx-editorial-form-border) 68%, transparent );--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 );--pfx-form-shell-padding: clamp(.9rem, 1.4vw, 1.2rem)}.form-config-controls{position:relative;top:auto;margin:0;display:flex;align-items:center;gap:.35rem;z-index:60;background:color-mix(in srgb,var(--pfx-form-shell-surface) 88%,var(--md-sys-color-surface) 12%);padding:8px var(--pfx-form-shell-padding);border:1px solid var(--pfx-form-footer-border);border-bottom-color:color-mix(in srgb,var(--pfx-form-footer-border) 72%,transparent);border-radius:var(--pfx-editorial-form-radius) var(--pfx-editorial-form-radius) 0 0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none;min-width:0;justify-content:flex-end;pointer-events:none;opacity:.96;transition:opacity .16s ease,border-color .16s ease}.form-config-controls>*{pointer-events:auto}.form-config-controls:hover,.form-config-controls:focus-within{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant) 74%)}.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 button{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:stretch;justify-content:center;padding:1.25rem;text-align:left;color:var(--md-sys-color-on-surface);gap:1rem;min-height:220px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,var(--md-sys-color-outline-variant) 86%);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent),transparent 42%),color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,var(--md-sys-color-surface) 22%);box-shadow:0 12px 28px #0f172a14}.form-loading-header{display:flex;align-items:center;gap:.85rem}.form-loading-copy{min-width:0}.form-loading p{margin:0}.form-loading-title{font-weight:700;color:var(--md-sys-color-on-surface)}.form-loading-subtitle{margin-top:.2rem;font-size:.875rem;color:var(--md-sys-color-on-surface-variant)}.form-loading-skeleton{display:grid;gap:.7rem}.form-loading-line,.form-loading-field{display:block;overflow:hidden;position:relative;border-radius:6px;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 74%,var(--md-sys-color-primary) 6%)}.form-loading-line:after,.form-loading-field:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--md-sys-color-primary) 16%,white 18%),transparent);animation:form-loading-shimmer 1.4s ease-in-out infinite}.form-loading-line{height:12px}.form-loading-line-title{width:min(42%,240px)}.form-loading-line-short{width:min(64%,360px)}.form-loading-field{height:44px}.form-loading-field-wide{height:72px}@keyframes form-loading-shimmer{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.form-loading-line:after,.form-loading-field:after{animation:none;transform:none;opacity:.28}}.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;max-width:100%;min-width:0;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( --pdx-color-surface-muted, var(--md-sys-color-surface-container-low) );--pfx-editorial-form-border: var( --pfx-form-stroke, var(--pdx-color-border-subtle, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-text: var( --pdx-color-text-primary, var(--md-sys-color-on-surface) );--pfx-editorial-form-text-muted: var( --pdx-color-text-secondary, 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( --pdx-color-primary, 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;--pdx-presentation-label-size: var(--pfx-pres-compact-label-size, .78rem);--pdx-presentation-value-size: var(--pfx-pres-compact-value-size, 1rem);--pdx-presentation-icon-size: var(--pfx-pres-icon-size, 18px);--pdx-presentation-row-gap: var(--pfx-pres-row-gap, .5rem);--pdx-presentation-column-gap: var(--pfx-pres-column-gap, .5rem);--pdx-presentation-section-gap: var(--pfx-pres-section-gap, .75rem);--pdx-presentation-label-width: var(--pfx-pres-label-width, 220px);--pdx-presentation-flag-height: var(--pfx-pres-boolean-min-height, 22px);--pdx-presentation-flag-radius: var(--pfx-pres-boolean-radius, 999px);--pdx-presentation-flag-padding: var(--pfx-pres-boolean-padding, 0 8px);--pdx-presentation-flag-active-color: var( --pfx-pres-boolean-active-color, var(--md-sys-color-primary) );--pdx-presentation-flag-active-bg: var( --pfx-pres-boolean-active-bg, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent) );--pdx-presentation-flag-inactive-color: var( --pfx-pres-boolean-inactive-color, var(--md-sys-color-on-surface-variant) );--pdx-presentation-flag-inactive-bg: var( --pfx-pres-boolean-inactive-bg, color-mix(in srgb, var(--md-sys-color-outline-variant) 34%, transparent) );--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.canvas-mode-enabled{border:1px solid var(--pfx-form-footer-border);border-radius:var(--pfx-editorial-form-radius);background:linear-gradient(180deg,color-mix(in srgb,var(--pfx-form-shell-surface) 86%,transparent),color-mix(in srgb,var(--pfx-editorial-form-surface-muted) 42%,transparent));overflow:visible}.form-config-controls+.praxis-dynamic-form.canvas-mode-enabled{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.praxis-dynamic-form.canvas-mode-enabled>.section-drop-wrapper,.praxis-dynamic-form.canvas-mode-enabled>.form-editorial-blocks{margin-inline:var(--pfx-form-shell-padding)}.praxis-dynamic-form.canvas-mode-enabled>.section-drop-wrapper:first-of-type,.praxis-dynamic-form.canvas-mode-enabled>.form-editorial-blocks:first-child{margin-top:var(--pfx-form-shell-padding)}.praxis-dynamic-form.canvas-mode-enabled>praxis-form-actions[data-actions-placement=afterSections]{display:block;margin-top:var(--pfx-form-shell-padding)}.praxis-dynamic-form.editorial-visual-context{--_pfx-editorial-host-text: var( --editorial-text-primary, var(--foreground, var(--mat-sys-on-surface, #1d1b20)) );--_pfx-editorial-host-text-muted: var( --editorial-text-secondary, var( --muted-foreground, color-mix(in srgb, var(--_pfx-editorial-host-text) 64%, transparent) ) );--_pfx-editorial-host-surface: var( --editorial-surface-primary, var(--card, var(--mat-sys-surface-container, #ffffff)) );--_pfx-editorial-host-surface-muted: var( --editorial-surface-secondary, var(--surface-dim, var(--muted, var(--mat-sys-surface-container-low, #f7f2fa))) );--_pfx-editorial-host-border: var( --editorial-border-color, var(--border, var(--mat-sys-outline-variant, #cac4d0)) );--_pfx-editorial-host-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--primary, var(--mat-sys-primary, #6750a4))) );--_pfx-editorial-host-accent-text: var( --editorial-cta-primary-text, var( --editorial-accent-contrast, var(--primary-foreground, var(--mat-sys-on-primary, #ffffff)) ) );--_pfx-editorial-host-accent-container: var( --primary-container, color-mix(in srgb, var(--_pfx-editorial-host-accent) 16%, var(--_pfx-editorial-host-surface) 84%) );--_pfx-editorial-host-accent-container-text: var( --primary-container-fg, var(--_pfx-editorial-host-accent) );font-family:var(--editorial-body-font-family, inherit);font-size:var(--editorial-body-size, 1rem);color:var(--_pfx-editorial-host-text);--pfx-editorial-form-surface: var( --editorial-surface-primary, var(--pfx-form-section-surface, var(--_pfx-editorial-host-surface)) );--pfx-editorial-form-surface-muted: var( --editorial-surface-secondary, var(--_pfx-editorial-host-surface-muted) );--pfx-editorial-form-border: var( --editorial-border-color, var(--pfx-form-stroke, var(--_pfx-editorial-host-border)) );--pfx-editorial-form-text: var( --editorial-text-primary, var(--_pfx-editorial-host-text) );--pfx-editorial-form-text-muted: var( --editorial-text-secondary, color-mix( in srgb, var(--_pfx-editorial-host-text-muted) 86%, var(--_pfx-editorial-host-text) 14% ) );--pfx-editorial-form-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--_pfx-editorial-host-accent)) );--pfx-editorial-form-accent-text: var( --editorial-cta-primary-text, var(--editorial-accent-contrast, var(--_pfx-editorial-host-accent-text)) );--pfx-editorial-form-accent-container: var(--_pfx-editorial-host-accent-container);--pfx-editorial-form-accent-container-text: var(--_pfx-editorial-host-accent-container-text);--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( --editorial-text-primary, inherit );--md-sys-color-on-surface-variant: var( --editorial-text-secondary, inherit );--md-sys-color-primary: var( --pfx-editorial-form-accent, var(--md-sys-color-primary) );--md-sys-color-primary-container: var( --pfx-editorial-form-accent-container, var(--md-sys-color-primary-container) );--md-sys-color-on-primary-container: var( --pfx-editorial-form-accent-container-text, var(--md-sys-color-on-primary-container) );--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, inherit );--mat-sys-on-surface: var( --editorial-text-primary, inherit );--mat-sys-on-surface-variant: var( --editorial-text-secondary, inherit );--mat-sys-on-surface-rgb: var( --editorial-text-primary-rgb, inherit );color:inherit;color-scheme:light}.praxis-dynamic-form.presentation-mode .form-row,.praxis-dynamic-form.readonly-mode .form-row{gap:var(--pdx-presentation-column-gap);margin-bottom:var(--pdx-presentation-row-gap)}.praxis-dynamic-form.presentation-mode{--pfx-pres-on-surface: var( --pdx-color-text-primary, var(--pfx-editorial-form-text, var(--pfx-form-label-strong, currentColor)) );--pfx-pres-on-surface-variant: var( --pdx-color-text-secondary, var( --pfx-editorial-form-text-muted, var( --pfx-form-label-muted, color-mix(in srgb, var(--pfx-pres-on-surface) 78%, transparent) ) ) )}.praxis-dynamic-form.presentation-mode .form-section,.praxis-dynamic-form.readonly-mode .form-section{padding:var(--pdx-presentation-section-gap) .875rem}.praxis-dynamic-form.pres-compact .form-row{gap:var(--pdx-presentation-column-gap, .35rem);margin-bottom:var(--pdx-presentation-row-gap, .35rem)}.praxis-dynamic-form.pres-compact .form-section{padding:var(--pdx-presentation-section-gap, .5rem) .75rem}.praxis-dynamic-form.pres-label-left .praxis-presentation{display:grid;grid-template-columns:minmax(0,var(--pfx-presentation-label-w, var(--pdx-presentation-label-width))) minmax(0,1fr);align-items:baseline;column-gap:var(--pdx-presentation-column-gap, 10px)}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:right;margin-bottom:0}@media(max-width:480px){.praxis-dynamic-form.pres-label-left .praxis-presentation{grid-template-columns:minmax(0,1fr);row-gap:4px}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:start}}.form-section{border:1px solid var(--pfx-form-section-divider);border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);max-width:100%;min-width:0;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;color:var(--pfx-editorial-form-text);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]{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{position:relative;display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:var(--pfx-form-section-heading-divider-gap, 18px)}.section-heading:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 8%,var(--pfx-form-section-divider) 46%,var(--pfx-form-section-divider) 54%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 92%,transparent 100%);border-radius:999px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%)}.section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 10px)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-inline-divider-gap, 0)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only:after{display:none}.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:var(--pfx-form-section-heading-divider-gap, 16px)}.form-section.section-appearance-step .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 16px)}:host(.pfx-form-section-divider-inline-title) .form-section.section-appearance-step .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-inline-divider-gap, 0)}.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:not(.canvas-mode-enabled)>praxis-form-actions[data-actions-placement=afterSections]{margin-top:18px}.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);max-width:100%;min-width:0;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=entityLookup],.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;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--pfx-field-gap, 10px);flex:1;max-width:100%;min-width:0;transition:all .2s ease;border-radius:4px;position:relative}.form-layout-rich-content{display:block;width:100%;max-width:100%;min-width:0;margin-bottom:var(--pfx-field-gap, 10px);color:var(--pfx-editorial-form-text-muted, var(--md-sys-color-on-surface-variant));font:var(--mdc-typography-body-medium, 400 14px/20px system-ui);overflow-wrap:anywhere}:host ::ng-deep .form-layout-rich-content .prx-rich-content-root{display:grid;gap:8px;min-width:0;max-width:100%}:host ::ng-deep .form-layout-rich-content .prx-rich-node{min-width:0;max-width:100%}:host ::ng-deep .form-layout-rich-content .prx-rich-text{color:inherit;line-height:20px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note,:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice{border:1px solid color-mix(in srgb,var(--pfx-editorial-form-accent) 12%,var(--pfx-editorial-form-border) 88%);border-left:3px solid var(--pfx-editorial-form-accent);border-radius:8px;background:color-mix(in srgb,var(--pfx-editorial-form-accent-container) 12%,var(--pfx-editorial-form-surface-muted) 88%)}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:flex-start;padding:11px 12px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note:before{content:\"info\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--pfx-editorial-form-accent);font-family:Material Symbols Outlined;font-size:20px;font-weight:400;line-height:20px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note .prx-rich-text{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice{padding:10px 12px;color:var(--pfx-editorial-form-text)}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice .prx-rich-compose{align-items:flex-start;gap:10px}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice .prx-rich-icon{color:var(--pfx-editorial-form-accent);font-size:20px;line-height:20px;margin-top:1px}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider{display:grid;grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);align-items:center;gap:10px;color:var(--pfx-editorial-form-text-muted);font:var(--mdc-typography-label-small, 600 12px/16px system-ui);text-transform:uppercase}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider:before,:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider:after{content:\"\";height:1px;background:var(--pfx-editorial-form-border)}:host ::ng-deep .form-layout-rich-content .prx-rich-card{gap:6px;padding:12px 14px;border-color:var(--pfx-editorial-form-border);border-radius:8px;background:var(--pfx-editorial-form-surface-muted);color:var(--pfx-editorial-form-text);box-shadow:none}:host ::ng-deep .form-layout-rich-content .prx-rich-card-title{color:var(--pfx-editorial-form-text);font:var(--mdc-typography-title-small, 600 14px/20px system-ui)}:host ::ng-deep .form-layout-rich-content .prx-rich-card-subtitle,:host ::ng-deep .form-layout-rich-content .prx-rich-metric-caption{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .prx-rich-card .prx-rich-text{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .prx-rich-badge{background:var(--pfx-editorial-form-accent-container);color:var(--pfx-editorial-form-accent-container-text)}.row-drop-wrapper{container-type:inline-size}.form-row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}@container (max-width: 768px){.form-row.grid-12{grid-template-columns:minmax(0,1fr)}.form-row.grid-12>.column-drop-wrapper,.form-row.grid-12>.form-column,.form-row.grid-12 .form-column{grid-column:1/-1!important;margin-left:0;width:100%;max-width:100%;min-width:0}}.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-row.grid-12{grid-template-columns:minmax(0,1fr)}.form-row.grid-12>.column-drop-wrapper,.form-row.grid-12>.form-column,.form-row.grid-12 .form-column{grid-column:1/-1!important;margin-left:0;width:100%;max-width:100%;min-width:0}.column-drop-wrapper,.row-drop-wrapper,.form-layout-rich-content,.praxis-dynamic-form .mat-mdc-form-field,.praxis-dynamic-form .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mdc-text-field{max-width:100%;min-width:0}:host ::ng-deep .praxis-dynamic-form .pfx-field-shell,:host ::ng-deep .praxis-dynamic-form .pfx-field-shell-wrapper,:host ::ng-deep .praxis-dynamic-form .pfx-field-shell-host,:host ::ng-deep .praxis-dynamic-form .mat-mdc-form-field,:host ::ng-deep .praxis-dynamic-form .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-dynamic-form .mdc-text-field{width:100%;max-width:100%;min-width:0}.form-section{padding:clamp(.75rem,4vw,1rem)}.section-heading{gap:10px;margin-bottom:16px;padding-bottom:var(--pfx-form-section-heading-divider-gap, 14px)}.section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 8px)}}.section-title{display:flex;align-items:center;gap:8px}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title{width:100%;min-width:0}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title:after{content:\"\";display:block;flex:1 1 auto;min-width:var(--pfx-form-section-title-inline-divider-min-width, 48px);height:2px;margin-left:var(--pfx-form-section-title-inline-divider-gap, 12px);pointer-events:none;background:linear-gradient(90deg,var(--pfx-form-section-divider) 0%,var(--pfx-form-section-divider) 62%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 88%,transparent 100%);border-radius:999px;-webkit-mask-image:linear-gradient(90deg,black 0%,black 72%,transparent 100%);mask-image:linear-gradient(90deg,black 0%,black 72%,transparent 100%)}:host(.pfx-form-section-divider-inline-title) .section-heading.align-center .section-title:after{display:none}@media(max-width:640px){:host(.pfx-form-section-divider-inline-title) .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 8px)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only:after{display:block}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title{width:auto}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title:after{display:none}}.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\" role=\"status\" aria-live=\"polite\" aria-label=\"Carregando formul\u00E1rio\">\n    <div class=\"form-loading-header\">\n      <mat-progress-spinner diameter=\"32\" aria-label=\"Carregando formul\u00E1rio\"></mat-progress-spinner>\n      <div class=\"form-loading-copy\">\n        <p class=\"form-loading-title\">Carregando formul\u00E1rio...</p>\n        <p class=\"form-loading-subtitle\">Preparando campos e op\u00E7\u00F5es do cadastro.</p>\n      </div>\n    </div>\n    <div class=\"form-loading-skeleton\" aria-hidden=\"true\">\n      <span class=\"form-loading-line form-loading-line-title\"></span>\n      <span class=\"form-loading-line\"></span>\n      <span class=\"form-loading-line form-loading-line-short\"></span>\n      <span class=\"form-loading-field\"></span>\n      <span class=\"form-loading-field form-loading-field-wide\"></span>\n    </div>\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      @if (showAiAssistant) {\n        <button type=\"button\" praxisIconButton=\"auto_awesome\" size=\"dense\" (click)=\"openAiAssistant()\" [disabled]=\"isLoading\"\n          [attr.data-testid]=\"aiAssistantTriggerTestId('config-controls')\"\n          aria-label=\"Abrir copiloto semantico Praxis do formulario\"\n          matTooltip=\"Abrir copiloto sem\u00E2ntico do formul\u00E1rio\">\n        </button>\n      }\n      <button type=\"button\" praxisIconButton=\"settings\" size=\"dense\" (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      </button>\n      <button type=\"button\" praxisIconButton=\"link_off\" size=\"dense\" (click)=\"disconnect()\" matTooltip=\"Desconectar da fonte de dados\"\n        [disabled]=\"isLoading\">\n      </button>\n    </div>\n  }\n\n  <!-- Form Content -->\n  @if (!resourcePath && !hasExplicitSchemaUrl() && !hasRenderableConfig()) {\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    @if (enableCustomization && selectedElement) {\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        [selectedElement]=\"selectedElement\"\n      [style.transform]=\"toolbarTransform\"></praxis-canvas-toolbar>\n    }\n\n    @if (formBlocksBefore?.nodes?.length) {\n      <section class=\"form-editorial-blocks form-editorial-blocks-before\" data-editorial-placement=\"before\">\n        <praxis-rich-content\n          [document]=\"formBlocksBeforeDocument\"\n          [context]=\"getEditorialRichContentContext()\"\n          [hostCapabilities]=\"richContentHostCapabilities\"\n        ></praxis-rich-content>\n      </section>\n    }\n\n    @if (actionPlacement === 'top' && !(effectivePresentation || effectiveReadonly)) {\n      <praxis-form-actions data-actions-placement=\"top\" [actions]=\"effectiveActions\" [isSubmitting]=\"submitting\"\n        [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\" [actionOverrides]=\"actionRuleProps\"\n        [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n        [suppressInvalidSubmitHint]=\"entityHydrationPending\"\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      <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]=\"!isLastVisibleSection(section) ? 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              [class.title-only]=\"isSectionHeaderTitleOnly(section)\"\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]=\"getEffectiveSectionTitleGapBottom(section)\" [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\" praxisIconButton=\"edit\" size=\"dense\" (click)=\"openSectionEditor(section, 'title')\"\n                        aria-label=\"Editar t\u00EDtulo da se\u00E7\u00E3o\" matTooltip=\"Editar t\u00EDtulo\">\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\" praxisIconButton=\"edit\" size=\"dense\"\n                        (click)=\"openSectionEditor(section, 'description')\" aria-label=\"Editar descri\u00E7\u00E3o da se\u00E7\u00E3o\"\n                        matTooltip=\"Editar descri\u00E7\u00E3o\">\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                      [praxisIconButton]=\"action.icon\"\n                      size=\"compact\"\n                      [busy]=\"action.loading\"\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                        <span class=\"section-heading-action-sr-only\">{{ getSectionHeaderActionLoadingLabel(action) }}</span>\n                      }\n                    </button>\n                  }\n                </div>\n              }\n              @if (isSectionCollapsible(section)) {\n                <button type=\"button\" class=\"section-collapse-btn\" [praxisIconButton]=\"isSectionCollapsed(section) ? 'expand_more' : 'expand_less'\" size=\"compact\"\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                </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                                @for (renderItem of getColumnRenderItems(column); track renderItem.id) {\n                                  @if (renderItem.kind === 'fields') {\n                                    <ng-container dynamicFieldLoader [fields]=\"getRenderableFieldsForLoader(renderItem.fields)\" [formGroup]=\"form\"\n                                      [enableExternalControlBinding]=\"true\"\n                                      [readonlyMode]=\"effectiveReadonly\"\n                                      [disabledMode]=\"effectiveDisabledMode\"\n                                      [presentationMode]=\"presentationForLoader\" [visible]=\"visibleGlobal === null ? null : visibleGlobal\"\n                                      [canvasMode]=\"enableCustomization\" (canvasMouseEnter)=\"onFieldMouseEnter($event)\"\n                                      (canvasMouseLeave)=\"onFieldMouseLeave($event)\" (canvasClick)=\"onFieldClick($event)\"\n                                      (canvasFocus)=\"onFieldFocus($event)\"\n                                      (renderError)=\"onFieldRenderError($event)\">\n                                    </ng-container>\n                                  } @else {\n                                    <praxis-rich-content\n                                      class=\"form-layout-rich-content\"\n                                      [ngClass]=\"renderItem.className || null\"\n                                      [ngStyle]=\"renderItem.style || null\"\n                                      [document]=\"renderItem.document\"\n                                      [layout]=\"renderItem.layout\"\n                                      [rootClassName]=\"renderItem.rootClassName || ''\"\n                                      [context]=\"getEditorialRichContentContext()\"\n                                      [hostCapabilities]=\"richContentHostCapabilities\"\n                                    ></praxis-rich-content>\n                                  }\n                                }\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 (isLastVisibleSection(section) && beforeActionsPlacement === 'insideLastSection' && formBlocksBeforeActions?.nodes?.length) {\n                    <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n                      <praxis-rich-content\n                        [document]=\"formBlocksBeforeActionsDocument\"\n                        [context]=\"getEditorialRichContentContext()\"\n                        [hostCapabilities]=\"richContentHostCapabilities\"\n                      ></praxis-rich-content>\n                    </section>\n                  }\n                  @if (actionPlacement === 'insideLastSection' && isLastVisibleSection(section) && !(effectivePresentation\n                    || effectiveReadonly)) {\n                    <praxis-form-actions data-actions-placement=\"insideLastSection\" [actions]=\"effectiveActions\"\n                      [isSubmitting]=\"submitting\" [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\"\n                      [actionOverrides]=\"actionRuleProps\" [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n                      [suppressInvalidSubmitHint]=\"entityHydrationPending\"\n                      [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\n                      diameter=\"40\"\n                      color=\"primary\"\n                      [attr.aria-label]=\"config.messages?.loading?.submit || 'Salvando formul\u00E1rio'\"\n                    ></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?.nodes?.length) {\n          <section class=\"form-editorial-blocks form-editorial-blocks-before-actions\" data-editorial-placement=\"beforeActions\">\n            <praxis-rich-content\n              [document]=\"formBlocksBeforeActionsDocument\"\n              [context]=\"getEditorialRichContentContext()\"\n              [hostCapabilities]=\"richContentHostCapabilities\"\n            ></praxis-rich-content>\n          </section>\n        }\n\n        @if (actionPlacement === 'afterSections' && !(effectivePresentation || effectiveReadonly)) {\n          <praxis-form-actions data-actions-placement=\"afterSections\" [actions]=\"effectiveActions\" [isSubmitting]=\"submitting\"\n            [formIsValid]=\"effectiveFormIsValid\" [submitError]=\"submitError\" [formId]=\"formId\"\n            [actionOverrides]=\"actionRuleProps\" [invalidRequiredFieldLabels]=\"invalidRequiredFieldLabels\"\n            [suppressInvalidSubmitHint]=\"entityHydrationPending\"\n            [editorialVisualContext]=\"hasEditorialVisualContext()\"\n          (action)=\"onFormAction($event)\"></praxis-form-actions>\n        }\n\n        @if (formBlocksAfter?.nodes?.length) {\n          <section class=\"form-editorial-blocks form-editorial-blocks-after\" data-editorial-placement=\"after\">\n            <praxis-rich-content\n              [document]=\"formBlocksAfterDocument\"\n              [context]=\"getEditorialRichContentContext()\"\n              [hostCapabilities]=\"richContentHostCapabilities\"\n            ></praxis-rich-content>\n          </section>\n        }\n      </form>\n      @if (showAiAssistant && !enableCustomization && mode === 'view') {\n        <div class=\"ai-floating-assistant\">\n          <button type=\"button\" praxisIconButton=\"auto_awesome\" size=\"compact\" (click)=\"openAiAssistant()\" [disabled]=\"isLoading\"\n            [attr.data-testid]=\"aiAssistantTriggerTestId('view-floating')\"\n            aria-label=\"Abrir copiloto semantico Praxis do formulario\"\n            matTooltip=\"Pedir ajuda sobre este formul\u00E1rio\">\n          </button>\n        </div>\n      }\n      @if (showAiAssistant && aiAssistantOpen && aiAssistantViewState) {\n        <praxis-ai-assistant-shell\n          [labels]=\"aiAssistantLabels\"\n          [mode]=\"aiAssistantViewState.mode\"\n          [state]=\"aiAssistantViewState.state\"\n          [contextItems]=\"aiAssistantViewState.contextItems\"\n          [attachments]=\"aiAssistantViewState.attachments\"\n          [messages]=\"aiAssistantViewState.messages\"\n          [quickReplies]=\"aiAssistantViewState.quickReplies\"\n          [prompt]=\"aiAssistantPrompt\"\n          [statusText]=\"aiAssistantViewState.statusText\"\n          [errorText]=\"aiAssistantViewState.errorText\"\n          [busy]=\"aiAssistantViewState.state === 'processing' || aiAssistantViewState.state === 'applying'\"\n          [canApply]=\"aiAssistantViewState.canApply\"\n          [layout]=\"aiAssistantLayout\"\n          testIdPrefix=\"dynamic-form-ai-assistant\"\n          panelTestId=\"dynamic-form-ai-assistant-panel\"\n          submitTestId=\"dynamic-form-ai-assistant-submit\"\n          applyTestId=\"dynamic-form-ai-assistant-apply\"\n          (promptChange)=\"onAiAssistantPromptChange($event)\"\n          (submitPrompt)=\"onAiAssistantSubmit($event)\"\n          (apply)=\"onAiAssistantApply()\"\n          (retryTurn)=\"onAiAssistantRetry()\"\n          (cancelTurn)=\"onAiAssistantCancel()\"\n          (quickReply)=\"onAiAssistantQuickReply($event)\"\n          (editMessage)=\"onAiAssistantEditMessage($event)\"\n          (resendMessage)=\"onAiAssistantResendMessage($event)\"\n          (layoutChange)=\"onAiAssistantLayoutChange($event)\"\n          (close)=\"closeAiAssistant()\"\n        ></praxis-ai-assistant-shell>\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:var(--praxis-layer-authoring-hover, 300)}.canvas-mode-enabled .canvas-element.selected{z-index:var(--praxis-layer-authoring-selected, 320)}.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:var(--praxis-layer-authoring-insert, 280)}.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;--pfx-editorial-form-radius: var(--pfx-form-section-radius, 8px);--pfx-editorial-form-border: var( --pfx-form-stroke, var(--pdx-color-border-subtle, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-surface: var( --pfx-form-section-surface, var(--pdx-color-surface, var(--md-sys-color-surface-container)) );--pfx-editorial-form-surface-muted: var( --pdx-color-surface-muted, var(--md-sys-color-surface-container-low) );--pfx-form-shell-surface: color-mix( in srgb, var(--pfx-editorial-form-surface) 36%, transparent );--pfx-form-section-divider: color-mix( in srgb, var(--pfx-editorial-form-border) 68%, transparent );--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 );--pfx-form-shell-padding: clamp(.9rem, 1.4vw, 1.2rem)}.form-config-controls{position:relative;top:auto;margin:0;display:flex;align-items:center;gap:.35rem;z-index:60;background:color-mix(in srgb,var(--pfx-form-shell-surface) 88%,var(--md-sys-color-surface) 12%);padding:8px var(--pfx-form-shell-padding);border:1px solid var(--pfx-form-footer-border);border-bottom-color:color-mix(in srgb,var(--pfx-form-footer-border) 72%,transparent);border-radius:var(--pfx-editorial-form-radius) var(--pfx-editorial-form-radius) 0 0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none;min-width:0;justify-content:flex-end;pointer-events:none;opacity:.96;transition:opacity .16s ease,border-color .16s ease}.form-config-controls>*{pointer-events:auto}.form-config-controls:hover,.form-config-controls:focus-within{opacity:1;border-color:color-mix(in srgb,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant) 74%)}.form-config-controls .praxis-icon-button{color:var(--md-sys-color-on-surface-variant)}.form-config-controls .praxis-icon-button:hover{color:var(--md-sys-color-primary)}.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 button{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:stretch;justify-content:center;padding:1.25rem;text-align:left;color:var(--md-sys-color-on-surface);gap:1rem;min-height:220px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,var(--md-sys-color-outline-variant) 86%);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent),transparent 42%),color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,var(--md-sys-color-surface) 22%);box-shadow:0 12px 28px #0f172a14}.form-loading-header{display:flex;align-items:center;gap:.85rem}.form-loading-copy{min-width:0}.form-loading p{margin:0}.form-loading-title{font-weight:700;color:var(--md-sys-color-on-surface)}.form-loading-subtitle{margin-top:.2rem;font-size:.875rem;color:var(--md-sys-color-on-surface-variant)}.form-loading-skeleton{display:grid;gap:.7rem}.form-loading-line,.form-loading-field{display:block;overflow:hidden;position:relative;border-radius:6px;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 74%,var(--md-sys-color-primary) 6%)}.form-loading-line:after,.form-loading-field:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--md-sys-color-primary) 16%,white 18%),transparent);animation:form-loading-shimmer 1.4s ease-in-out infinite}.form-loading-line{height:12px}.form-loading-line-title{width:min(42%,240px)}.form-loading-line-short{width:min(64%,360px)}.form-loading-field{height:44px}.form-loading-field-wide{height:72px}@keyframes form-loading-shimmer{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.form-loading-line:after,.form-loading-field:after{animation:none;transform:none;opacity:.28}}.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;max-width:100%;min-width:0;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( --pdx-color-surface-muted, var(--md-sys-color-surface-container-low) );--pfx-editorial-form-border: var( --pfx-form-stroke, var(--pdx-color-border-subtle, var(--md-sys-color-outline-variant)) );--pfx-editorial-form-text: var( --pdx-color-text-primary, var(--md-sys-color-on-surface) );--pfx-editorial-form-text-muted: var( --pdx-color-text-secondary, 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( --pdx-color-primary, 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;--pdx-presentation-label-size: var(--pfx-pres-compact-label-size, .78rem);--pdx-presentation-value-size: var(--pfx-pres-compact-value-size, 1rem);--pdx-presentation-icon-size: var(--pfx-pres-icon-size, 18px);--pdx-presentation-row-gap: var(--pfx-pres-row-gap, .5rem);--pdx-presentation-column-gap: var(--pfx-pres-column-gap, .5rem);--pdx-presentation-section-gap: var(--pfx-pres-section-gap, .75rem);--pdx-presentation-label-width: var(--pfx-pres-label-width, 220px);--pdx-presentation-flag-height: var(--pfx-pres-boolean-min-height, 22px);--pdx-presentation-flag-radius: var(--pfx-pres-boolean-radius, 999px);--pdx-presentation-flag-padding: var(--pfx-pres-boolean-padding, 0 8px);--pdx-presentation-flag-active-color: var( --pfx-pres-boolean-active-color, var(--md-sys-color-primary) );--pdx-presentation-flag-active-bg: var( --pfx-pres-boolean-active-bg, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent) );--pdx-presentation-flag-inactive-color: var( --pfx-pres-boolean-inactive-color, var(--md-sys-color-on-surface-variant) );--pdx-presentation-flag-inactive-bg: var( --pfx-pres-boolean-inactive-bg, color-mix(in srgb, var(--md-sys-color-outline-variant) 34%, transparent) );--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.canvas-mode-enabled{border:1px solid var(--pfx-form-footer-border);border-radius:var(--pfx-editorial-form-radius);background:linear-gradient(180deg,color-mix(in srgb,var(--pfx-form-shell-surface) 86%,transparent),color-mix(in srgb,var(--pfx-editorial-form-surface-muted) 42%,transparent));overflow:visible}.form-config-controls+.praxis-dynamic-form.canvas-mode-enabled{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.praxis-dynamic-form.canvas-mode-enabled>.section-drop-wrapper,.praxis-dynamic-form.canvas-mode-enabled>.form-editorial-blocks{margin-inline:var(--pfx-form-shell-padding)}.praxis-dynamic-form.canvas-mode-enabled>.section-drop-wrapper:first-of-type,.praxis-dynamic-form.canvas-mode-enabled>.form-editorial-blocks:first-child{margin-top:var(--pfx-form-shell-padding)}.praxis-dynamic-form.canvas-mode-enabled>praxis-form-actions[data-actions-placement=afterSections]{display:block;margin-top:var(--pfx-form-shell-padding)}.praxis-dynamic-form.editorial-visual-context{--_pfx-editorial-host-text: var( --editorial-text-primary, var(--foreground, var(--mat-sys-on-surface, #1d1b20)) );--_pfx-editorial-host-text-muted: var( --editorial-text-secondary, var( --muted-foreground, color-mix(in srgb, var(--_pfx-editorial-host-text) 64%, transparent) ) );--_pfx-editorial-host-surface: var( --editorial-surface-primary, var(--card, var(--mat-sys-surface-container, #ffffff)) );--_pfx-editorial-host-surface-muted: var( --editorial-surface-secondary, var(--surface-dim, var(--muted, var(--mat-sys-surface-container-low, #f7f2fa))) );--_pfx-editorial-host-border: var( --editorial-border-color, var(--border, var(--mat-sys-outline-variant, #cac4d0)) );--_pfx-editorial-host-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--primary, var(--mat-sys-primary, #6750a4))) );--_pfx-editorial-host-accent-text: var( --editorial-cta-primary-text, var( --editorial-accent-contrast, var(--primary-foreground, var(--mat-sys-on-primary, #ffffff)) ) );--_pfx-editorial-host-accent-container: var( --primary-container, color-mix(in srgb, var(--_pfx-editorial-host-accent) 16%, var(--_pfx-editorial-host-surface) 84%) );--_pfx-editorial-host-accent-container-text: var( --primary-container-fg, var(--_pfx-editorial-host-accent) );font-family:var(--editorial-body-font-family, inherit);font-size:var(--editorial-body-size, 1rem);color:var(--_pfx-editorial-host-text);--pfx-editorial-form-surface: var( --editorial-surface-primary, var(--pfx-form-section-surface, var(--_pfx-editorial-host-surface)) );--pfx-editorial-form-surface-muted: var( --editorial-surface-secondary, var(--_pfx-editorial-host-surface-muted) );--pfx-editorial-form-border: var( --editorial-border-color, var(--pfx-form-stroke, var(--_pfx-editorial-host-border)) );--pfx-editorial-form-text: var( --editorial-text-primary, var(--_pfx-editorial-host-text) );--pfx-editorial-form-text-muted: var( --editorial-text-secondary, color-mix( in srgb, var(--_pfx-editorial-host-text-muted) 86%, var(--_pfx-editorial-host-text) 14% ) );--pfx-editorial-form-accent: var( --editorial-cta-primary, var(--editorial-accent, var(--_pfx-editorial-host-accent)) );--pfx-editorial-form-accent-text: var( --editorial-cta-primary-text, var(--editorial-accent-contrast, var(--_pfx-editorial-host-accent-text)) );--pfx-editorial-form-accent-container: var(--_pfx-editorial-host-accent-container);--pfx-editorial-form-accent-container-text: var(--_pfx-editorial-host-accent-container-text);--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( --editorial-text-primary, inherit );--md-sys-color-on-surface-variant: var( --editorial-text-secondary, inherit );--md-sys-color-primary: var( --pfx-editorial-form-accent, var(--md-sys-color-primary) );--md-sys-color-primary-container: var( --pfx-editorial-form-accent-container, var(--md-sys-color-primary-container) );--md-sys-color-on-primary-container: var( --pfx-editorial-form-accent-container-text, var(--md-sys-color-on-primary-container) );--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, inherit );--mat-sys-on-surface: var( --editorial-text-primary, inherit );--mat-sys-on-surface-variant: var( --editorial-text-secondary, inherit );--mat-sys-on-surface-rgb: var( --editorial-text-primary-rgb, inherit );color:inherit;color-scheme:light}.praxis-dynamic-form.presentation-mode .form-row,.praxis-dynamic-form.readonly-mode .form-row{gap:var(--pdx-presentation-column-gap);margin-bottom:var(--pdx-presentation-row-gap)}.praxis-dynamic-form.presentation-mode{--pfx-pres-on-surface: var( --pdx-color-text-primary, var(--pfx-editorial-form-text, var(--pfx-form-label-strong, currentColor)) );--pfx-pres-on-surface-variant: var( --pdx-color-text-secondary, var( --pfx-editorial-form-text-muted, var( --pfx-form-label-muted, color-mix(in srgb, var(--pfx-pres-on-surface) 78%, transparent) ) ) )}.praxis-dynamic-form.presentation-mode .form-section,.praxis-dynamic-form.readonly-mode .form-section{padding:var(--pdx-presentation-section-gap) .875rem}.praxis-dynamic-form.pres-compact .form-row{gap:var(--pdx-presentation-column-gap, .35rem);margin-bottom:var(--pdx-presentation-row-gap, .35rem)}.praxis-dynamic-form.pres-compact .form-section{padding:var(--pdx-presentation-section-gap, .5rem) .75rem}.praxis-dynamic-form.pres-label-left .praxis-presentation{display:grid;grid-template-columns:minmax(0,var(--pfx-presentation-label-w, var(--pdx-presentation-label-width))) minmax(0,1fr);align-items:baseline;column-gap:var(--pdx-presentation-column-gap, 10px)}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:right;margin-bottom:0}@media(max-width:480px){.praxis-dynamic-form.pres-label-left .praxis-presentation{grid-template-columns:minmax(0,1fr);row-gap:4px}.praxis-dynamic-form.pres-label-left .praxis-presentation__label{text-align:start}}.form-section{border:1px solid var(--pfx-form-section-divider);border-radius:var(--pfx-editorial-form-radius);padding:var(--pfx-form-section-padding);max-width:100%;min-width:0;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;color:var(--pfx-editorial-form-text);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]{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{position:relative;display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:var(--pfx-form-section-heading-divider-gap, 18px)}.section-heading:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 8%,var(--pfx-form-section-divider) 46%,var(--pfx-form-section-divider) 54%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 92%,transparent 100%);border-radius:999px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 82%,transparent 100%)}.section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 10px)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-inline-divider-gap, 0)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only:after{display:none}.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.tone-primary{color:var(--md-sys-color-primary)}.section-heading-action-btn.tone-accent,.section-heading-action-btn.tone-secondary{color:var(--md-sys-color-tertiary)}.section-heading-action-btn.tone-warn,.section-heading-action-btn.tone-danger,.section-heading-action-btn.tone-error{color:var(--md-sys-color-error)}.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:var(--pfx-form-section-heading-divider-gap, 16px)}.form-section.section-appearance-step .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 16px)}:host(.pfx-form-section-divider-inline-title) .form-section.section-appearance-step .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-inline-divider-gap, 0)}.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:not(.canvas-mode-enabled)>praxis-form-actions[data-actions-placement=afterSections]{margin-top:18px}.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}.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);max-width:100%;min-width:0;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=entityLookup],.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;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--pfx-field-gap, 10px);flex:1;max-width:100%;min-width:0;transition:all .2s ease;border-radius:4px;position:relative}.form-layout-rich-content{display:block;width:100%;max-width:100%;min-width:0;margin-bottom:var(--pfx-field-gap, 10px);color:var(--pfx-editorial-form-text-muted, var(--md-sys-color-on-surface-variant));font:var(--mdc-typography-body-medium, 400 14px/20px system-ui);overflow-wrap:anywhere}:host ::ng-deep .form-layout-rich-content .prx-rich-content-root{display:grid;gap:8px;min-width:0;max-width:100%}:host ::ng-deep .form-layout-rich-content .prx-rich-node{min-width:0;max-width:100%}:host ::ng-deep .form-layout-rich-content .prx-rich-text{color:inherit;line-height:20px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note,:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice{border:1px solid color-mix(in srgb,var(--pfx-editorial-form-accent) 12%,var(--pfx-editorial-form-border) 88%);border-left:3px solid var(--pfx-editorial-form-accent);border-radius:8px;background:color-mix(in srgb,var(--pfx-editorial-form-accent-container) 12%,var(--pfx-editorial-form-surface-muted) 88%)}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:flex-start;padding:11px 12px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note:before{content:\"info\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--pfx-editorial-form-accent);font-family:Material Symbols Outlined;font-size:20px;font-weight:400;line-height:20px}:host ::ng-deep .form-layout-rich-content .praxis-form-visual-block--note .prx-rich-text{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice{padding:10px 12px;color:var(--pfx-editorial-form-text)}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice .prx-rich-compose{align-items:flex-start;gap:10px}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-notice .prx-rich-icon{color:var(--pfx-editorial-form-accent);font-size:20px;line-height:20px;margin-top:1px}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider{display:grid;grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);align-items:center;gap:10px;color:var(--pfx-editorial-form-text-muted);font:var(--mdc-typography-label-small, 600 12px/16px system-ui);text-transform:uppercase}:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider:before,:host ::ng-deep .form-layout-rich-content .praxis-rich-content-divider:after{content:\"\";height:1px;background:var(--pfx-editorial-form-border)}:host ::ng-deep .form-layout-rich-content .prx-rich-card{gap:6px;padding:12px 14px;border-color:var(--pfx-editorial-form-border);border-radius:8px;background:var(--pfx-editorial-form-surface-muted);color:var(--pfx-editorial-form-text);box-shadow:none}:host ::ng-deep .form-layout-rich-content .prx-rich-card-title{color:var(--pfx-editorial-form-text);font:var(--mdc-typography-title-small, 600 14px/20px system-ui)}:host ::ng-deep .form-layout-rich-content .prx-rich-card-subtitle,:host ::ng-deep .form-layout-rich-content .prx-rich-metric-caption{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .prx-rich-card .prx-rich-text{color:var(--pfx-editorial-form-text-muted)}:host ::ng-deep .form-layout-rich-content .prx-rich-badge{background:var(--pfx-editorial-form-accent-container);color:var(--pfx-editorial-form-accent-container-text)}.row-drop-wrapper{container-type:inline-size}.form-row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}@container (max-width: 768px){.form-row.grid-12{grid-template-columns:minmax(0,1fr)}.form-row.grid-12>.column-drop-wrapper,.form-row.grid-12>.form-column,.form-row.grid-12 .form-column{grid-column:1/-1!important;margin-left:0;width:100%;max-width:100%;min-width:0}}.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-row.grid-12{grid-template-columns:minmax(0,1fr)}.form-row.grid-12>.column-drop-wrapper,.form-row.grid-12>.form-column,.form-row.grid-12 .form-column{grid-column:1/-1!important;margin-left:0;width:100%;max-width:100%;min-width:0}.column-drop-wrapper,.row-drop-wrapper,.form-layout-rich-content,.praxis-dynamic-form .mat-mdc-form-field,.praxis-dynamic-form .mat-mdc-text-field-wrapper,.praxis-dynamic-form .mdc-text-field{max-width:100%;min-width:0}:host ::ng-deep .praxis-dynamic-form .pfx-field-shell,:host ::ng-deep .praxis-dynamic-form .pfx-field-shell-wrapper,:host ::ng-deep .praxis-dynamic-form .pfx-field-shell-host,:host ::ng-deep .praxis-dynamic-form .mat-mdc-form-field,:host ::ng-deep .praxis-dynamic-form .mat-mdc-text-field-wrapper,:host ::ng-deep .praxis-dynamic-form .mdc-text-field{width:100%;max-width:100%;min-width:0}.form-section{padding:clamp(.75rem,4vw,1rem)}.section-heading{gap:10px;margin-bottom:16px;padding-bottom:var(--pfx-form-section-heading-divider-gap, 14px)}.section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 8px)}}.section-title{display:flex;align-items:center;gap:8px}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title{width:100%;min-width:0}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title:after{content:\"\";display:block;flex:1 1 auto;min-width:var(--pfx-form-section-title-inline-divider-min-width, 48px);height:2px;margin-left:var(--pfx-form-section-title-inline-divider-gap, 12px);pointer-events:none;background:linear-gradient(90deg,var(--pfx-form-section-divider) 0%,var(--pfx-form-section-divider) 62%,color-mix(in srgb,var(--pfx-form-section-divider) 18%,transparent) 88%,transparent 100%);border-radius:999px;-webkit-mask-image:linear-gradient(90deg,black 0%,black 72%,transparent 100%);mask-image:linear-gradient(90deg,black 0%,black 72%,transparent 100%)}:host(.pfx-form-section-divider-inline-title) .section-heading.align-center .section-title:after{display:none}@media(max-width:640px){:host(.pfx-form-section-divider-inline-title) .section-heading.title-only{padding-bottom:var(--pfx-form-section-heading-title-only-divider-gap, 8px)}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only:after{display:block}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title{width:auto}:host(.pfx-form-section-divider-inline-title) .section-heading.title-only .section-title:after{display:none}}.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.GenericCrudService }, { type: i2.HttpClient }, { type: i1$3.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: FormLayoutService }, { type: FormContextService }, { type: FormRulesService }, { type: i7.SettingsPanelService }, { type: i2$1.MatDialog }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ASYNC_CONFIG_STORAGE]
@@ -21266,7 +21252,7 @@ class RowConfiguratorComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RowConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RowConfiguratorComponent, isStandalone: true, selector: "praxis-row-configurator", inputs: { row: "row", fieldMetadata: "fieldMetadata", availableFields: "availableFields", sectionIndex: "sectionIndex", rowIndex: "rowIndex", isLastRow: "isLastRow", selected: "selected", availableFieldsListId: "availableFieldsListId", connectedDropListIds: "connectedDropListIds", gapGlobal: "gapGlobal" }, outputs: { rowChange: "rowChange", remove: "remove", applyRowGapAll: "applyRowGapAll", fieldDrop: "fieldDrop", addVisualBlock: "addVisualBlock", addApiField: "addApiField", addLocalField: "addLocalField", editField: "editField", editVisualBlock: "editVisualBlock", moveVisualBlock: "moveVisualBlock", moveVisualBlockToColumn: "moveVisualBlockToColumn", removeVisualBlock: "removeVisualBlock", select: "select" }, providers: [providePraxisI18nConfig(LAYOUT_EDITOR_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: "@if (row) {\n  <div class=\"row-meta\">\n    <div class=\"bp-toggle\" role=\"group\" [attr.aria-label]=\"t('row.breakpoint.ariaLabel')\">\n      @for (bp of breakpoints; track bp) {\n        <button\n          type=\"button\"\n          mat-stroked-button\n          class=\"bp-toggle__btn\"\n          [class.active]=\"previewBreakpoint === bp\"\n          (click)=\"previewBreakpoint = bp\"\n          >\n          {{ bp }}\n        </button>\n      }\n    </div>\n    <div class=\"gap-controls\">\n      @if (hasMultipleColumns()) {\n        <div class=\"gap-chip\" [matTooltip]=\"t('row.gap.columns.tooltip')\"\n          [attr.aria-label]=\"t('row.gap.columns.ariaLabel')\">\n          <span class=\"chip-title\">{{ t('row.gap.columns.title') }}</span>\n          <button mat-icon-button class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('gap', -2)\"\n            [attr.aria-label]=\"t('row.gap.columns.reduce')\">\n            <mat-icon>remove</mat-icon>\n          </button>\n          <input class=\"gap-chip__input\" type=\"number\" min=\"0\" [ngModel]=\"row.gap ?? gapGlobal\"\n            (ngModelChange)=\"updateRowGap('gap', $event)\" [attr.aria-label]=\"t('row.gap.columns.valueAriaLabel')\" />\n          <span class=\"gap-chip__suffix\">px</span>\n          <button mat-icon-button class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('gap', 2)\"\n            [attr.aria-label]=\"t('row.gap.columns.increase')\">\n            <mat-icon>add</mat-icon>\n          </button>\n        </div>\n      }\n      <div class=\"gap-chip\" [matTooltip]=\"t('row.gap.row.tooltip')\" [attr.aria-label]=\"t('row.gap.row.ariaLabel')\">\n        <span class=\"chip-title\">{{ t('row.gap.row.title') }}</span>\n        <button mat-icon-button class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('rowGap', -2)\"\n          [attr.aria-label]=\"t('row.gap.row.reduce')\" [matTooltip]=\"t('row.gap.row.reduceTooltip')\">\n          <mat-icon>remove</mat-icon>\n        </button>\n        <input class=\"gap-chip__input\" type=\"number\" min=\"0\" [ngModel]=\"row.rowGap ?? 0\"\n          (ngModelChange)=\"updateRowGap('rowGap', $event)\" [attr.aria-label]=\"t('row.gap.row.valueAriaLabel')\" />\n        <span class=\"gap-chip__suffix\">px</span>\n        <button mat-icon-button class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('rowGap', 2)\"\n          [attr.aria-label]=\"t('row.gap.row.increase')\" [matTooltip]=\"t('row.gap.row.increaseTooltip')\">\n          <mat-icon>add</mat-icon>\n        </button>\n        <button mat-icon-button class=\"gap-chip__btn\" [matMenuTriggerFor]=\"rowGapMenu\"\n          [matTooltip]=\"t('row.gap.applyMore.tooltip')\" [attr.aria-label]=\"t('row.gap.applyMore.ariaLabel')\">\n          <mat-icon>done_all</mat-icon>\n        </button>\n        <mat-menu #rowGapMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"applyRowGapToAll()\">\n            <mat-icon>done_all</mat-icon>\n            <span>{{ t('row.gap.applyAll') }}</span>\n          </button>\n          <button mat-menu-item (click)=\"clearRowGap()\">\n            <mat-icon>undo</mat-icon>\n            <span>{{ t('row.gap.reset') }}</span>\n          </button>\n        </mat-menu>\n      </div>\n      <div class=\"gap-pill\" [attr.aria-label]=\"t('row.gap.summary.ariaLabel')\">\n        {{ t('row.gap.summary', { fieldsGap: row.rowGap ?? t('row.gap.default'), columnsGap: row.gap ?? gapGlobal }) }}\n      </div>\n      <div class=\"row-actions-meta\">\n        <button mat-icon-button [matMenuTriggerFor]=\"rowMenu\" (click)=\"openRowMenu()\" [matTooltip]=\"t('row.menu.tooltip')\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #rowMenu=\"matMenu\" (closed)=\"onMenuClosed()\">\n          @if (menuContext?.type === 'column') {\n            <button mat-menu-item (click)=\"toggleHidden(menuContext!.columnIndex!)\">\n              <mat-icon>{{ getHiddenFor(row.columns[menuContext!.columnIndex!]) ? 'visibility' : 'visibility_off'\n              }}</mat-icon>\n              <span>{{ getHiddenFor(row.columns[menuContext!.columnIndex!]) ? t('row.menu.showBreakpoint') : t('row.menu.hideBreakpoint') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"removeColumn(menuContext!.columnIndex!)\">\n              <mat-icon color=\"warn\">delete</mat-icon>\n              <span>{{ t('row.menu.removeColumn') }}</span>\n            </button>\n          } @else {\n            <div mat-menu-item disabled>{{ t('row.menu.columnPresets') }}</div>\n            <button mat-menu-item (click)=\"applyPreset([12])\"><mat-icon>view_column</mat-icon><span>1/1</span></button>\n            <button mat-menu-item (click)=\"applyPreset([6,6])\"><mat-icon>view_column</mat-icon><span>1/2 \u2014\n          1/2</span></button>\n          <button mat-menu-item (click)=\"applyPreset([4,8])\"><mat-icon>view_column</mat-icon><span>1/3 \u2014\n        2/3</span></button>\n        <button mat-menu-item (click)=\"applyPreset([8,4])\"><mat-icon>view_column</mat-icon><span>2/3 \u2014\n      1/3</span></button>\n      <button mat-menu-item (click)=\"applyPreset([4,4,4])\"><mat-icon>view_column</mat-icon><span>1/3 \u2014 1/3 \u2014\n    1/3</span></button>\n    <button mat-menu-item (click)=\"applyPreset([3,3,3,3])\"><mat-icon>view_column</mat-icon><span>1/4 \u2014 1/4 \u2014 1/4 \u2014\n  1/4</span></button>\n  <button mat-menu-item (click)=\"addColumn()\"><mat-icon>add</mat-icon><span>{{ t('row.menu.addColumn') }}</span></button>\n  <button mat-menu-item (click)=\"removeRow()\"><mat-icon>delete</mat-icon><span>{{ t('row.menu.removeRow') }}</span></button>\n}\n</mat-menu>\n</div>\n</div>\n@if (getSpanTotal(previewBreakpoint) !== 12) {\n  <div class=\"span-warning\">\n    <mat-icon color=\"warn\">warning</mat-icon>\n    {{ t('row.spanWarning', { total: getSpanTotal(previewBreakpoint) }) }}\n  </div>\n}\n</div>\n}\n\n<div class=\"row-container\" [style.marginBottom.px]=\"!isLastRow ? (row.rowGap || null) : null\">\n  @if (row.columns.length > 0) {\n    <div class=\"row grid-12\" cdkDropListGroup (click)=\"selectRow()\" [class.selected]=\"isRowSelected()\" tabindex=\"0\"\n      role=\"button\" [attr.aria-label]=\"t('row.ariaLabel', { row: rowIndex + 1 })\" [attr.aria-selected]=\"isRowSelected()\"\n      [style.--pfx-grid-gap.px]=\"row.gap || null\" [style.--px-row-field-gap.px]=\"row.rowGap ?? null\">\n      <div class=\"row-label\" aria-hidden=\"true\">{{ t('row.label', { row: rowIndex + 1 }) }}</div>\n      @for (column of row.columns; track column; let i = $index) {\n        <div class=\"column\" [id]=\"getColumnId(i)\" cdkDropList\n          [cdkDropListData]=\"getColumnLayoutItems(column)\" [cdkDropListConnectedTo]=\"connectedColumns(i)\"\n          (cdkDropListDropped)=\"drop($event)\" (cdkDropListEntered)=\"onDropEnter(i)\" (cdkDropListExited)=\"onDropExit(i)\"\n          (click)=\"selectColumn(i, $event)\" [class.drop-active]=\"activeDropIndex === i\"\n          [class.selected]=\"isColumnSelected(i)\" [ngClass]=\"getColumnClassList(column)\"\n          [style.grid-column]=\"'span ' + getSpanFor(column)\" tabindex=\"0\" role=\"button\"\n          [attr.aria-label]=\"t('row.column.ariaLabel', { column: i + 1, row: rowIndex + 1, span: getSpanFor(column) })\"\n          [attr.aria-selected]=\"isColumnSelected(i)\">\n          <div class=\"column-header\">\n            <div class=\"column-status-pill\" [matMenuTriggerFor]=\"columnSettingsMenu\"\n              [matTooltip]=\"t('row.column.settingsTooltip')\" [class.active]=\"isColumnSelected(i)\">\n              <span class=\"status-bp\">{{ previewBreakpoint }}</span>\n              <span class=\"status-divider\">\u00B7</span>\n              <span class=\"status-span\">\n                <mat-icon>view_column</mat-icon>\n                {{ getSpanFor(column) }}/12\n              </span>\n              <span class=\"status-divider\">\u00B7</span>\n              <span class=\"status-offset\">\n                {{ t('row.column.statusOffset', { offset: getOffsetFor(column) }) }}\n              </span>\n              @if (getHiddenFor(column)) {\n                <span class=\"status-hidden\">\n                  <mat-icon>visibility_off</mat-icon>\n                </span>\n              }\n            </div>\n            <div class=\"column-actions\">\n              <button mat-icon-button class=\"action-btn\" [matMenuTriggerFor]=\"columnOverflowMenu\"\n                (click)=\"$event.stopPropagation()\" [matTooltip]=\"t('row.column.optionsTooltip')\"\n                [attr.aria-label]=\"t('row.column.optionsAriaLabel')\">\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </div>\n          </div>\n          <mat-menu #columnSettingsMenu=\"matMenu\" class=\"column-settings-popover\">\n            <div class=\"popover-content\" (click)=\"$event.stopPropagation()\">\n              @if (getSuggestedSpan(i); as suggested) {\n                <div class=\"control-group\">\n                  <button mat-flat-button color=\"primary\" (click)=\"setSpan(i, suggested)\"\n                    [matTooltip]=\"t('row.column.autoFitTooltip')\">\n                    <mat-icon>auto_fix_high</mat-icon>\n                    {{ t('row.column.autoFitAction', { span: suggested }) }}\n                  </button>\n                </div>\n              }\n              <div class=\"control-group\">\n                <label>{{ t('row.column.widthLabel', { bp: previewBreakpoint }) }}</label>\n                <div class=\"control-row\">\n                  <button mat-icon-button (click)=\"adjustSpan(i, -1)\" [attr.aria-label]=\"t('row.column.reduceWidth')\"><mat-icon>remove</mat-icon></button>\n                  <span class=\"value-display\">{{ getSpanFor(column) }} / 12</span>\n                  <button mat-icon-button (click)=\"adjustSpan(i, 1)\" [attr.aria-label]=\"t('row.column.increaseWidth')\"><mat-icon>add</mat-icon></button>\n                </div>\n              </div>\n              <div class=\"control-group\">\n                <label>{{ t('row.column.offsetLabel', { bp: previewBreakpoint }) }}</label>\n                <div class=\"control-row\">\n                  <button mat-icon-button (click)=\"adjustOffset(i, -1)\" [attr.aria-label]=\"t('row.column.reduceOffset')\"><mat-icon>chevron_left</mat-icon></button>\n                  <span class=\"value-display\">{{ getOffsetFor(column) }}</span>\n                  <button mat-icon-button (click)=\"adjustOffset(i, 1)\" [attr.aria-label]=\"t('row.column.increaseOffset')\"><mat-icon>chevron_right</mat-icon></button>\n                </div>\n              </div>\n              <div class=\"control-group\">\n                <button mat-stroked-button (click)=\"toggleHidden(i)\" [color]=\"getHiddenFor(column) ? 'warn' : ''\">\n                  <mat-icon>{{ getHiddenFor(column) ? 'visibility' : 'visibility_off' }}</mat-icon>\n                  {{ getHiddenFor(column) ? t('row.column.showAction') : t('row.column.hideAction') }}\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n          <mat-menu #columnOverflowMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"openColumnConfig(i)\" [matTooltip]=\"t('row.column.openConfigTooltip')\">\n              <mat-icon>tune</mat-icon>\n              <span>{{ t('row.column.openConfigAction') }}</span>\n            </button>\n            <button mat-menu-item [matMenuTriggerFor]=\"apiFieldMenu\" [matTooltip]=\"t('apiFields.addTooltip')\">\n              <mat-icon>input</mat-icon>\n              <span>{{ t('apiFields.addAction') }}</span>\n            </button>\n            <mat-menu #apiFieldMenu=\"matMenu\">\n              @for (field of availableFields; track field) {\n                <button\n                  mat-menu-item\n                  (click)=\"addApiFieldToColumn(i, field.name)\"\n                  >\n                  <mat-icon>short_text</mat-icon>\n                  <span>{{ getFieldLabel(field) }}</span>\n                </button>\n              }\n              @if (!availableFields.length) {\n                <button mat-menu-item disabled>\n                  <span>{{ t('apiFields.empty') }}</span>\n                </button>\n              }\n            </mat-menu>\n            <button mat-menu-item (click)=\"addLocalFieldToColumn(i)\" [matTooltip]=\"t('localField.addTooltip')\">\n              <mat-icon>edit_note</mat-icon>\n              <span>{{ t('localField.addAction') }}</span>\n            </button>\n            <button mat-menu-item [matMenuTriggerFor]=\"visualBlockPresetMenu\" [matTooltip]=\"t('visualBlock.addTooltip')\">\n              <mat-icon>notes</mat-icon>\n              <span>{{ t('visualBlock.addAction') }}</span>\n            </button>\n            <mat-menu #visualBlockPresetMenu=\"matMenu\">\n              @for (preset of visualBlockPresets; track preset) {\n                <button\n                  mat-menu-item\n                  (click)=\"addVisualBlockToColumn(i, preset.id)\"\n                  >\n                  <mat-icon>{{ preset.icon }}</mat-icon>\n                  <span>{{ t(preset.labelKey) }}</span>\n                </button>\n              }\n            </mat-menu>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)=\"moveColumn(i, -1)\" [disabled]=\"i === 0\"\n              [matTooltip]=\"t('row.column.moveLeftTooltip')\">\n              <mat-icon>arrow_back</mat-icon>\n              <span>{{ t('row.column.moveLeftAction') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"moveColumn(i, 1)\" [disabled]=\"i === row.columns.length - 1\"\n              [matTooltip]=\"t('row.column.moveRightTooltip')\">\n              <mat-icon>arrow_forward</mat-icon>\n              <span>{{ t('row.column.moveRightAction') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"clearColumn(i)\" [disabled]=\"!hasColumnContent(column)\"\n              [matTooltip]=\"t('column.clearTooltip')\">\n              <mat-icon>backspace</mat-icon>\n              <span>{{ t('row.column.clearAction') }}</span>\n            </button>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)=\"removeColumn(i)\" [matTooltip]=\"t('row.column.removeTooltip')\">\n              <mat-icon color=\"warn\">delete</mat-icon>\n              <span>{{ t('row.menu.removeColumn') }}</span>\n            </button>\n          </mat-menu>\n          <div class=\"column-content\">\n            @if (getHiddenFor(column)) {\n              <div class=\"hidden-overlay\">\n                <mat-icon aria-hidden=\"true\">visibility_off</mat-icon>\n                <span>{{ t('row.column.hiddenOverlay', { bp: previewBreakpoint }) }}</span>\n              </div>\n            }\n            @if (hasColumnContent(column)) {\n              @for (item of getColumnLayoutItems(column); track trackLayoutItem(itemIndex, item); let itemIndex = $index) {\n                @if (item.kind === 'field') {\n                  <div\n                    class=\"field-layout-item\"\n                    (click)=\"selectField(item.fieldName, i, $event)\"\n                    [class.selected]=\"isFieldSelected(item.fieldName)\"\n                    >\n                    <praxis-field-configurator [field]=\"getFieldByName(item.fieldName)\"></praxis-field-configurator>\n                    <button\n                      mat-icon-button\n                      class=\"field-layout-item__edit\"\n                      type=\"button\"\n                      [matTooltip]=\"t('field.editMetadata')\"\n                      [attr.aria-label]=\"t('field.editMetadata')\"\n                      (click)=\"openFieldEditor(item.fieldName, i, $event)\"\n                      >\n                      <mat-icon>edit</mat-icon>\n                    </button>\n                  </div>\n                } @else {\n                  @if (item.kind === 'richContent') {\n                    <div\n                      class=\"visual-block-preview\"\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      [class.selected]=\"selected?.type === 'visualBlock' && selected?.itemId === item.id\"\n                      (click)=\"selectVisualBlock(i, item, $event)\"\n                      (dblclick)=\"openVisualBlockEditor(i, item, $event)\"\n                      (keydown.enter)=\"openVisualBlockEditor(i, item, $event)\"\n                      (keydown.space)=\"selectVisualBlock(i, item, $event); $event.preventDefault()\"\n                      >\n                      <button\n                        class=\"visual-block-preview__drag-handle\"\n                        type=\"button\"\n                        cdkDragHandle\n                        [matTooltip]=\"t('visualBlock.dragHandle')\"\n                        [attr.aria-label]=\"t('visualBlock.dragHandle')\"\n                        (click)=\"$event.stopPropagation()\"\n                        >\n                        <mat-icon>drag_indicator</mat-icon>\n                      </button>\n                      <mat-icon aria-hidden=\"true\">notes</mat-icon>\n                      <span class=\"visual-block-preview__text\">\n                        <span class=\"visual-block-preview__eyebrow\">{{ t('visualBlock.previewEyebrow') }}</span>\n                        <span class=\"visual-block-preview__label\">{{ getVisualBlockLabel(item) }}</span>\n                      </span>\n                      <span class=\"visual-block-preview__actions\">\n                        <button\n                          mat-icon-button\n                          class=\"visual-block-preview__action visual-block-preview__quick-action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.moveUp')\"\n                          [attr.aria-label]=\"t('visualBlock.moveUp')\"\n                          [disabled]=\"itemIndex === 0\"\n                          (click)=\"moveVisualBlockItem(i, item, -1, $event)\"\n                          >\n                          <mat-icon>arrow_upward</mat-icon>\n                        </button>\n                        <button\n                          mat-icon-button\n                          class=\"visual-block-preview__action visual-block-preview__quick-action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.moveDown')\"\n                          [attr.aria-label]=\"t('visualBlock.moveDown')\"\n                          [disabled]=\"itemIndex === getColumnLayoutItems(column).length - 1\"\n                          (click)=\"moveVisualBlockItem(i, item, 1, $event)\"\n                          >\n                          <mat-icon>arrow_downward</mat-icon>\n                        </button>\n                        <button\n                          mat-icon-button\n                          class=\"visual-block-preview__action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.editAction')\"\n                          [attr.aria-label]=\"t('visualBlock.editAction')\"\n                          (click)=\"openVisualBlockEditor(i, item, $event)\"\n                          >\n                          <mat-icon>edit</mat-icon>\n                        </button>\n                        <button\n                          mat-icon-button\n                          class=\"visual-block-preview__action\"\n                          type=\"button\"\n                          [matMenuTriggerFor]=\"visualBlockActionsMenu\"\n                          [matTooltip]=\"t('visualBlock.moreActions')\"\n                          [attr.aria-label]=\"t('visualBlock.moreActions')\"\n                          >\n                          <mat-icon>more_vert</mat-icon>\n                        </button>\n                        <mat-menu #visualBlockActionsMenu=\"matMenu\">\n                          <button\n                            mat-menu-item\n                            [disabled]=\"itemIndex === 0\"\n                            (click)=\"moveVisualBlockItem(i, item, -1, $event)\"\n                            >\n                            <mat-icon>arrow_upward</mat-icon>\n                            <span>{{ t('visualBlock.moveUp') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"itemIndex === getColumnLayoutItems(column).length - 1\"\n                            (click)=\"moveVisualBlockItem(i, item, 1, $event)\"\n                            >\n                            <mat-icon>arrow_downward</mat-icon>\n                            <span>{{ t('visualBlock.moveDown') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"!canMoveVisualBlockToColumn(i, -1)\"\n                            (click)=\"moveVisualBlockToAdjacentColumn(i, item, -1, $event)\"\n                            >\n                            <mat-icon>arrow_back</mat-icon>\n                            <span>{{ t('visualBlock.movePreviousColumn') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"!canMoveVisualBlockToColumn(i, 1)\"\n                            (click)=\"moveVisualBlockToAdjacentColumn(i, item, 1, $event)\"\n                            >\n                            <mat-icon>arrow_forward</mat-icon>\n                            <span>{{ t('visualBlock.moveNextColumn') }}</span>\n                          </button>\n                          <mat-divider></mat-divider>\n                          <button mat-menu-item (click)=\"removeVisualBlockItem(i, item, $event)\">\n                            <mat-icon color=\"warn\">delete</mat-icon>\n                            <span>{{ t('visualBlock.removeAction') }}</span>\n                          </button>\n                        </mat-menu>\n                      </span>\n                    </div>\n                  }\n                }\n              }\n            } @else {\n              <div class=\"column-placeholder\">\n                <span>{{ t('row.column.empty') }}</span>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"row-empty-placeholder\">\n      <span>{{ t('row.empty') }}</span>\n      <div class=\"row-placeholder-actions\">\n        <button mat-stroked-button (click)=\"addColumn()\" [matTooltip]=\"t('row.menu.addColumn')\">\n          <mat-icon>add</mat-icon> {{ t('row.menu.addColumn') }}\n        </button>\n        <button mat-stroked-button color=\"warn\" (click)=\"removeRow()\" [matTooltip]=\"t('row.menu.removeRow')\">\n          <mat-icon>delete</mat-icon> {{ t('row.menu.removeRow') }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".row-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.bp-toggle{display:inline-flex;gap:4px;align-items:center}.bp-toggle__btn{min-width:34px;height:30px;line-height:30px;padding:0 8px;text-transform:uppercase}.bp-toggle__btn.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.gap-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.gap-chip{display:inline-flex;align-items:center;gap:2px;padding:0 4px;height:32px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-variant)}.gap-chip__btn{width:24px;height:24px;line-height:24px;min-width:0;padding:0;--mdc-icon-button-size: 24px;--mdc-icon-button-state-layer-size: 24px}.gap-chip .mat-mdc-button-touch-target{width:24px;height:24px}.gap-chip mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.gap-chip__input{width:42px;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 600 13px/18px system-ui);text-align:center;outline:none;-moz-appearance:textfield}.gap-chip__input::-webkit-outer-spin-button,.gap-chip__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-chip__suffix{color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.gap-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.chip-title{font:var(--mdc-typography-label-medium, 600 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;letter-spacing:.03em}.span-warning{display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-error);background:var(--md-sys-color-error-container);border:1px solid var(--md-sys-color-error);border-radius:6px;padding:4px 8px}.row-container{position:relative;display:flex;align-items:stretch;min-width:0;max-width:100%}.row{display:flex;flex-grow:1;min-width:0;position:relative;padding-right:0;border-radius:6px;transition:box-shadow .2s ease;gap:var(--pfx-grid-gap, 12px)}.row:focus{outline:none;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}.row.selected{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row-label{position:absolute;left:-4px;top:-10px;transform:translateY(-100%);background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;padding:2px 6px;font-size:11px;opacity:0;transition:opacity .15s ease;pointer-events:none}.row:hover .row-label,.row.selected .row-label{opacity:1}.row-actions-meta{margin-left:auto}.column{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;border:1px dashed var(--md-sys-color-outline-variant);margin:0;background:var(--md-sys-color-surface-container);transition:background-color .2s ease,border-color .2s ease;border-radius:8px;overflow:hidden}.column-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--md-sys-color-surface-variant);border-bottom:1px solid var(--md-sys-color-outline-variant);min-height:36px}.column-content{flex:1;display:grid;align-content:start;gap:var(--px-row-field-gap, 6px);padding:8px}.column-status-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:12px;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.column-status-pill:hover,.column-status-pill.active{background:var(--md-sys-color-surface-variant);border-color:var(--md-sys-color-outline)}.status-bp{font-weight:700;text-transform:uppercase;font-size:11px;color:var(--md-sys-color-primary)}.status-divider{color:var(--md-sys-color-outline-variant)}.status-span,.status-offset{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--md-sys-color-on-surface)}.status-span mat-icon{font-size:14px;width:14px;height:14px}.status-hidden{color:var(--md-sys-color-error);display:flex;align-items:center}.status-hidden mat-icon{font-size:14px;width:14px;height:14px}.column-actions{display:flex;align-items:center;opacity:0;transition:opacity .2s ease}.column:hover .column-actions,.column.selected .column-actions,.column-actions:focus-within{opacity:1}.action-btn{width:24px;height:24px;line-height:24px;padding:0}.action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.popover-content{padding:12px;display:flex;flex-direction:column;gap:12px;min-width:200px}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:11px;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;font-weight:600}.control-row{display:flex;align-items:center;justify-content:space-between;background:var(--md-sys-color-surface-container-high);border-radius:8px;padding:2px}.value-display{font-weight:600;font-size:13px}.row.grid-12 .column{flex:unset}.column>div{margin:0}.column:focus{outline:none;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column.drop-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-variant)}.column.selected{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column.cdk-drop-list-receiving{animation:columnHighlight .3s ease-in-out}@keyframes columnHighlight{0%{box-shadow:0 0 0 2px var(--md-sys-color-primary)}to{box-shadow:none}}.field-selected-highlight.selected .field-item,.selected>.field-item{border-color:var(--md-sys-color-primary)!important;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.field-layout-item{position:relative;display:block;min-width:0}:host ::ng-deep .field-layout-item.selected .field-item{border-color:var(--md-sys-color-primary)!important;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.field-layout-item__edit{position:absolute;top:6px;right:6px;width:30px;height:30px;padding:0;line-height:1;min-width:30px;opacity:0;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease;--mdc-icon-button-size: 30px;--mdc-icon-button-state-layer-size: 30px;--mdc-icon-button-icon-size: 18px;--mat-icon-button-state-layer-size: 30px;--mat-icon-button-icon-size: 18px}.field-layout-item:hover .field-layout-item__edit,.field-layout-item.selected .field-layout-item__edit,.field-layout-item__edit:focus-visible{opacity:1;transform:translateY(0)}.visual-block-preview{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;padding:8px 10px;border:1px solid var(--md-sys-color-outline-variant);border-left:3px solid color-mix(in srgb,var(--md-sys-color-primary) 54%,var(--md-sys-color-outline-variant) 46%);border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface);font-size:13px;cursor:pointer}.visual-block-preview:hover{border-color:color-mix(in srgb,var(--md-sys-color-primary) 38%,var(--md-sys-color-outline-variant) 62%);border-left-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 10%,var(--md-sys-color-surface-container-low, var(--md-sys-color-surface)) 90%)}.visual-block-preview.selected{border-color:var(--md-sys-color-primary);border-left-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.visual-block-preview.cdk-drag-dragging{cursor:grabbing}.visual-block-preview.cdk-drag-preview{box-sizing:border-box;border-color:var(--md-sys-color-primary);border-left-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.visual-block-preview.cdk-drag-placeholder{position:relative;min-height:44px;border-color:transparent;border-left-color:transparent;background:transparent;box-shadow:none;opacity:1}.visual-block-preview.cdk-drag-placeholder>*{visibility:hidden}.visual-block-preview.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 8px auto 8px;height:2px;border-radius:999px;background:var(--md-sys-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent)}.visual-block-preview.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 4px);left:8px;width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-primary)}.visual-block-preview mat-icon{font-size:18px;width:18px;height:18px}.visual-block-preview__drag-handle{border:0;border-radius:50%;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--md-sys-color-on-surface-variant);cursor:grab;opacity:.72;flex:0 0 auto}.visual-block-preview__drag-handle:hover,.visual-block-preview__drag-handle:focus-visible{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 52%,transparent);opacity:1;outline:none}.visual-block-preview__drag-handle:active{cursor:grabbing}.visual-block-preview.selected .visual-block-preview__drag-handle,.visual-block-preview.cdk-drag-dragging .visual-block-preview__drag-handle,.visual-block-preview.cdk-drag-preview .visual-block-preview__drag-handle{color:var(--md-sys-color-primary);opacity:1}.visual-block-preview__text{display:grid;gap:1px;min-width:0}.visual-block-preview__eyebrow{color:var(--md-sys-color-primary);font:var(--mdc-typography-label-small, 700 11px/14px system-ui);text-transform:uppercase}.visual-block-preview__label{overflow:hidden;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 500 13px/18px system-ui);text-overflow:ellipsis;white-space:nowrap}.visual-block-preview__actions{margin-left:auto;display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}.visual-block-preview__action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;line-height:1;min-width:30px;--mdc-icon-button-size: 30px;--mdc-icon-button-state-layer-size: 30px;--mdc-icon-button-icon-size: 18px;--mat-icon-button-state-layer-size: 30px;--mat-icon-button-icon-size: 18px}.visual-block-preview__action mat-icon{display:inline-flex;align-items:center;justify-content:center;margin:0;line-height:18px}:host ::ng-deep .visual-block-preview__action .mat-mdc-button-touch-target{width:30px;height:30px}:host ::ng-deep .visual-block-preview__action .mat-mdc-button-persistent-ripple,:host ::ng-deep .visual-block-preview__action .mat-mdc-button-persistent-ripple:before,:host ::ng-deep .visual-block-preview__action .mat-ripple{inset:0;border-radius:50%}.visual-block-preview__quick-action{color:var(--md-sys-color-on-surface-variant);opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s ease}.visual-block-preview:hover .visual-block-preview__quick-action,.visual-block-preview:focus-within .visual-block-preview__quick-action,.visual-block-preview.selected .visual-block-preview__quick-action{opacity:1;visibility:visible}.visual-block-preview__quick-action[disabled]{opacity:.28}@media(max-width:768px),(pointer:coarse){.visual-block-preview__quick-action{display:none}}.row-empty-placeholder{flex:1;border:1px dashed var(--md-sys-color-outline-variant);margin:0;padding:16px;text-align:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container)}.row-placeholder-actions{margin-top:8px;display:flex;gap:8px;justify-content:center}.hidden-overlay{position:absolute;inset:0;background:var(--md-sys-color-surface-container-low);border:1px dashed var(--md-sys-color-outline);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--md-sys-color-on-surface-variant);z-index:2;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FieldConfiguratorComponent, selector: "praxis-field-configurator", inputs: ["field"] }, { 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.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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RowConfiguratorComponent, isStandalone: true, selector: "praxis-row-configurator", inputs: { row: "row", fieldMetadata: "fieldMetadata", availableFields: "availableFields", sectionIndex: "sectionIndex", rowIndex: "rowIndex", isLastRow: "isLastRow", selected: "selected", availableFieldsListId: "availableFieldsListId", connectedDropListIds: "connectedDropListIds", gapGlobal: "gapGlobal" }, outputs: { rowChange: "rowChange", remove: "remove", applyRowGapAll: "applyRowGapAll", fieldDrop: "fieldDrop", addVisualBlock: "addVisualBlock", addApiField: "addApiField", addLocalField: "addLocalField", editField: "editField", editVisualBlock: "editVisualBlock", moveVisualBlock: "moveVisualBlock", moveVisualBlockToColumn: "moveVisualBlockToColumn", removeVisualBlock: "removeVisualBlock", select: "select" }, providers: [providePraxisI18nConfig(LAYOUT_EDITOR_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: "@if (row) {\n  <div class=\"row-meta\">\n    <div class=\"bp-toggle\" role=\"group\" [attr.aria-label]=\"t('row.breakpoint.ariaLabel')\">\n      @for (bp of breakpoints; track bp) {\n        <button\n          type=\"button\"\n          mat-stroked-button\n          class=\"bp-toggle__btn\"\n          [class.active]=\"previewBreakpoint === bp\"\n          (click)=\"previewBreakpoint = bp\"\n          >\n          {{ bp }}\n        </button>\n      }\n    </div>\n    <div class=\"gap-controls\">\n      @if (hasMultipleColumns()) {\n        <div class=\"gap-chip\" [matTooltip]=\"t('row.gap.columns.tooltip')\"\n          [attr.aria-label]=\"t('row.gap.columns.ariaLabel')\">\n          <span class=\"chip-title\">{{ t('row.gap.columns.title') }}</span>\n          <button praxisIconButton=\"remove\" size=\"dense\" class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('gap', -2)\"\n            [attr.aria-label]=\"t('row.gap.columns.reduce')\">\n          </button>\n          <input class=\"gap-chip__input\" type=\"number\" min=\"0\" [ngModel]=\"row.gap ?? gapGlobal\"\n            (ngModelChange)=\"updateRowGap('gap', $event)\" [attr.aria-label]=\"t('row.gap.columns.valueAriaLabel')\" />\n          <span class=\"gap-chip__suffix\">px</span>\n          <button praxisIconButton=\"add\" size=\"dense\" class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('gap', 2)\"\n            [attr.aria-label]=\"t('row.gap.columns.increase')\">\n          </button>\n        </div>\n      }\n      <div class=\"gap-chip\" [matTooltip]=\"t('row.gap.row.tooltip')\" [attr.aria-label]=\"t('row.gap.row.ariaLabel')\">\n        <span class=\"chip-title\">{{ t('row.gap.row.title') }}</span>\n        <button praxisIconButton=\"remove\" size=\"dense\" class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('rowGap', -2)\"\n          [attr.aria-label]=\"t('row.gap.row.reduce')\" [matTooltip]=\"t('row.gap.row.reduceTooltip')\">\n        </button>\n        <input class=\"gap-chip__input\" type=\"number\" min=\"0\" [ngModel]=\"row.rowGap ?? 0\"\n          (ngModelChange)=\"updateRowGap('rowGap', $event)\" [attr.aria-label]=\"t('row.gap.row.valueAriaLabel')\" />\n        <span class=\"gap-chip__suffix\">px</span>\n        <button praxisIconButton=\"add\" size=\"dense\" class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('rowGap', 2)\"\n          [attr.aria-label]=\"t('row.gap.row.increase')\" [matTooltip]=\"t('row.gap.row.increaseTooltip')\">\n        </button>\n        <button praxisIconButton=\"done_all\" size=\"dense\" class=\"gap-chip__btn\" [matMenuTriggerFor]=\"rowGapMenu\"\n          [matTooltip]=\"t('row.gap.applyMore.tooltip')\" [attr.aria-label]=\"t('row.gap.applyMore.ariaLabel')\">\n        </button>\n        <mat-menu #rowGapMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"applyRowGapToAll()\">\n            <mat-icon>done_all</mat-icon>\n            <span>{{ t('row.gap.applyAll') }}</span>\n          </button>\n          <button mat-menu-item (click)=\"clearRowGap()\">\n            <mat-icon>undo</mat-icon>\n            <span>{{ t('row.gap.reset') }}</span>\n          </button>\n        </mat-menu>\n      </div>\n      <div class=\"gap-pill\" [attr.aria-label]=\"t('row.gap.summary.ariaLabel')\">\n        {{ t('row.gap.summary', { fieldsGap: row.rowGap ?? t('row.gap.default'), columnsGap: row.gap ?? gapGlobal }) }}\n      </div>\n      <div class=\"row-actions-meta\">\n        <button praxisIconButton=\"more_vert\" size=\"dense\" [matMenuTriggerFor]=\"rowMenu\" (click)=\"openRowMenu()\" [matTooltip]=\"t('row.menu.tooltip')\">\n        </button>\n        <mat-menu #rowMenu=\"matMenu\" (closed)=\"onMenuClosed()\">\n          @if (menuContext?.type === 'column') {\n            <button mat-menu-item (click)=\"toggleHidden(menuContext!.columnIndex!)\">\n              <mat-icon>{{ getHiddenFor(row.columns[menuContext!.columnIndex!]) ? 'visibility' : 'visibility_off'\n              }}</mat-icon>\n              <span>{{ getHiddenFor(row.columns[menuContext!.columnIndex!]) ? t('row.menu.showBreakpoint') : t('row.menu.hideBreakpoint') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"removeColumn(menuContext!.columnIndex!)\">\n              <mat-icon color=\"warn\">delete</mat-icon>\n              <span>{{ t('row.menu.removeColumn') }}</span>\n            </button>\n          } @else {\n            <div mat-menu-item disabled>{{ t('row.menu.columnPresets') }}</div>\n            <button mat-menu-item (click)=\"applyPreset([12])\"><mat-icon>view_column</mat-icon><span>1/1</span></button>\n            <button mat-menu-item (click)=\"applyPreset([6,6])\"><mat-icon>view_column</mat-icon><span>1/2 \u2014\n          1/2</span></button>\n          <button mat-menu-item (click)=\"applyPreset([4,8])\"><mat-icon>view_column</mat-icon><span>1/3 \u2014\n        2/3</span></button>\n        <button mat-menu-item (click)=\"applyPreset([8,4])\"><mat-icon>view_column</mat-icon><span>2/3 \u2014\n      1/3</span></button>\n      <button mat-menu-item (click)=\"applyPreset([4,4,4])\"><mat-icon>view_column</mat-icon><span>1/3 \u2014 1/3 \u2014\n    1/3</span></button>\n    <button mat-menu-item (click)=\"applyPreset([3,3,3,3])\"><mat-icon>view_column</mat-icon><span>1/4 \u2014 1/4 \u2014 1/4 \u2014\n  1/4</span></button>\n  <button mat-menu-item (click)=\"addColumn()\"><mat-icon>add</mat-icon><span>{{ t('row.menu.addColumn') }}</span></button>\n  <button mat-menu-item (click)=\"removeRow()\"><mat-icon>delete</mat-icon><span>{{ t('row.menu.removeRow') }}</span></button>\n}\n</mat-menu>\n</div>\n</div>\n@if (getSpanTotal(previewBreakpoint) !== 12) {\n  <div class=\"span-warning\">\n    <mat-icon color=\"warn\">warning</mat-icon>\n    {{ t('row.spanWarning', { total: getSpanTotal(previewBreakpoint) }) }}\n  </div>\n}\n</div>\n}\n\n<div class=\"row-container\" [style.marginBottom.px]=\"!isLastRow ? (row.rowGap || null) : null\">\n  @if (row.columns.length > 0) {\n    <div class=\"row grid-12\" cdkDropListGroup (click)=\"selectRow()\" [class.selected]=\"isRowSelected()\" tabindex=\"0\"\n      role=\"button\" [attr.aria-label]=\"t('row.ariaLabel', { row: rowIndex + 1 })\" [attr.aria-selected]=\"isRowSelected()\"\n      [style.--pfx-grid-gap.px]=\"row.gap || null\" [style.--px-row-field-gap.px]=\"row.rowGap ?? null\">\n      <div class=\"row-label\" aria-hidden=\"true\">{{ t('row.label', { row: rowIndex + 1 }) }}</div>\n      @for (column of row.columns; track column; let i = $index) {\n        <div class=\"column\" [id]=\"getColumnId(i)\" cdkDropList\n          [cdkDropListData]=\"getColumnLayoutItems(column)\" [cdkDropListConnectedTo]=\"connectedColumns(i)\"\n          (cdkDropListDropped)=\"drop($event)\" (cdkDropListEntered)=\"onDropEnter(i)\" (cdkDropListExited)=\"onDropExit(i)\"\n          (click)=\"selectColumn(i, $event)\" [class.drop-active]=\"activeDropIndex === i\"\n          [class.selected]=\"isColumnSelected(i)\" [ngClass]=\"getColumnClassList(column)\"\n          [style.grid-column]=\"'span ' + getSpanFor(column)\" tabindex=\"0\" role=\"button\"\n          [attr.aria-label]=\"t('row.column.ariaLabel', { column: i + 1, row: rowIndex + 1, span: getSpanFor(column) })\"\n          [attr.aria-selected]=\"isColumnSelected(i)\">\n          <div class=\"column-header\">\n            <div class=\"column-status-pill\" [matMenuTriggerFor]=\"columnSettingsMenu\"\n              [matTooltip]=\"t('row.column.settingsTooltip')\" [class.active]=\"isColumnSelected(i)\">\n              <span class=\"status-bp\">{{ previewBreakpoint }}</span>\n              <span class=\"status-divider\">\u00B7</span>\n              <span class=\"status-span\">\n                <mat-icon>view_column</mat-icon>\n                {{ getSpanFor(column) }}/12\n              </span>\n              <span class=\"status-divider\">\u00B7</span>\n              <span class=\"status-offset\">\n                {{ t('row.column.statusOffset', { offset: getOffsetFor(column) }) }}\n              </span>\n              @if (getHiddenFor(column)) {\n                <span class=\"status-hidden\">\n                  <mat-icon>visibility_off</mat-icon>\n                </span>\n              }\n            </div>\n            <div class=\"column-actions\">\n              <button praxisIconButton=\"more_vert\" size=\"dense\" class=\"action-btn\" [matMenuTriggerFor]=\"columnOverflowMenu\"\n                (click)=\"$event.stopPropagation()\" [matTooltip]=\"t('row.column.optionsTooltip')\"\n                [attr.aria-label]=\"t('row.column.optionsAriaLabel')\">\n              </button>\n            </div>\n          </div>\n          <mat-menu #columnSettingsMenu=\"matMenu\" class=\"column-settings-popover\">\n            <div class=\"popover-content\" (click)=\"$event.stopPropagation()\">\n              @if (getSuggestedSpan(i); as suggested) {\n                <div class=\"control-group\">\n                  <button mat-flat-button color=\"primary\" (click)=\"setSpan(i, suggested)\"\n                    [matTooltip]=\"t('row.column.autoFitTooltip')\">\n                    <mat-icon>auto_fix_high</mat-icon>\n                    {{ t('row.column.autoFitAction', { span: suggested }) }}\n                  </button>\n                </div>\n              }\n              <div class=\"control-group\">\n                <label>{{ t('row.column.widthLabel', { bp: previewBreakpoint }) }}</label>\n                <div class=\"control-row\">\n                  <button praxisIconButton=\"remove\" size=\"dense\" (click)=\"adjustSpan(i, -1)\" [attr.aria-label]=\"t('row.column.reduceWidth')\"></button>\n                  <span class=\"value-display\">{{ getSpanFor(column) }} / 12</span>\n                  <button praxisIconButton=\"add\" size=\"dense\" (click)=\"adjustSpan(i, 1)\" [attr.aria-label]=\"t('row.column.increaseWidth')\"></button>\n                </div>\n              </div>\n              <div class=\"control-group\">\n                <label>{{ t('row.column.offsetLabel', { bp: previewBreakpoint }) }}</label>\n                <div class=\"control-row\">\n                  <button praxisIconButton=\"chevron_left\" size=\"dense\" (click)=\"adjustOffset(i, -1)\" [attr.aria-label]=\"t('row.column.reduceOffset')\"></button>\n                  <span class=\"value-display\">{{ getOffsetFor(column) }}</span>\n                  <button praxisIconButton=\"chevron_right\" size=\"dense\" (click)=\"adjustOffset(i, 1)\" [attr.aria-label]=\"t('row.column.increaseOffset')\"></button>\n                </div>\n              </div>\n              <div class=\"control-group\">\n                <button mat-stroked-button (click)=\"toggleHidden(i)\" [color]=\"getHiddenFor(column) ? 'warn' : ''\">\n                  <mat-icon>{{ getHiddenFor(column) ? 'visibility' : 'visibility_off' }}</mat-icon>\n                  {{ getHiddenFor(column) ? t('row.column.showAction') : t('row.column.hideAction') }}\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n          <mat-menu #columnOverflowMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"openColumnConfig(i)\" [matTooltip]=\"t('row.column.openConfigTooltip')\">\n              <mat-icon>tune</mat-icon>\n              <span>{{ t('row.column.openConfigAction') }}</span>\n            </button>\n            <button mat-menu-item [matMenuTriggerFor]=\"apiFieldMenu\" [matTooltip]=\"t('apiFields.addTooltip')\">\n              <mat-icon>input</mat-icon>\n              <span>{{ t('apiFields.addAction') }}</span>\n            </button>\n            <mat-menu #apiFieldMenu=\"matMenu\">\n              @for (field of availableFields; track field) {\n                <button\n                  mat-menu-item\n                  (click)=\"addApiFieldToColumn(i, field.name)\"\n                  >\n                  <mat-icon>short_text</mat-icon>\n                  <span>{{ getFieldLabel(field) }}</span>\n                </button>\n              }\n              @if (!availableFields.length) {\n                <button mat-menu-item disabled>\n                  <span>{{ t('apiFields.empty') }}</span>\n                </button>\n              }\n            </mat-menu>\n            <button mat-menu-item (click)=\"addLocalFieldToColumn(i)\" [matTooltip]=\"t('localField.addTooltip')\">\n              <mat-icon>edit_note</mat-icon>\n              <span>{{ t('localField.addAction') }}</span>\n            </button>\n            <button mat-menu-item [matMenuTriggerFor]=\"visualBlockPresetMenu\" [matTooltip]=\"t('visualBlock.addTooltip')\">\n              <mat-icon>notes</mat-icon>\n              <span>{{ t('visualBlock.addAction') }}</span>\n            </button>\n            <mat-menu #visualBlockPresetMenu=\"matMenu\">\n              @for (preset of visualBlockPresets; track preset) {\n                <button\n                  mat-menu-item\n                  (click)=\"addVisualBlockToColumn(i, preset.id)\"\n                  >\n                  <mat-icon>{{ preset.icon }}</mat-icon>\n                  <span>{{ t(preset.labelKey) }}</span>\n                </button>\n              }\n            </mat-menu>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)=\"moveColumn(i, -1)\" [disabled]=\"i === 0\"\n              [matTooltip]=\"t('row.column.moveLeftTooltip')\">\n              <mat-icon>arrow_back</mat-icon>\n              <span>{{ t('row.column.moveLeftAction') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"moveColumn(i, 1)\" [disabled]=\"i === row.columns.length - 1\"\n              [matTooltip]=\"t('row.column.moveRightTooltip')\">\n              <mat-icon>arrow_forward</mat-icon>\n              <span>{{ t('row.column.moveRightAction') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"clearColumn(i)\" [disabled]=\"!hasColumnContent(column)\"\n              [matTooltip]=\"t('column.clearTooltip')\">\n              <mat-icon>backspace</mat-icon>\n              <span>{{ t('row.column.clearAction') }}</span>\n            </button>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)=\"removeColumn(i)\" [matTooltip]=\"t('row.column.removeTooltip')\">\n              <mat-icon color=\"warn\">delete</mat-icon>\n              <span>{{ t('row.menu.removeColumn') }}</span>\n            </button>\n          </mat-menu>\n          <div class=\"column-content\">\n            @if (getHiddenFor(column)) {\n              <div class=\"hidden-overlay\">\n                <mat-icon aria-hidden=\"true\">visibility_off</mat-icon>\n                <span>{{ t('row.column.hiddenOverlay', { bp: previewBreakpoint }) }}</span>\n              </div>\n            }\n            @if (hasColumnContent(column)) {\n              @for (item of getColumnLayoutItems(column); track trackLayoutItem(itemIndex, item); let itemIndex = $index) {\n                @if (item.kind === 'field') {\n                  <div\n                    class=\"field-layout-item\"\n                    (click)=\"selectField(item.fieldName, i, $event)\"\n                    [class.selected]=\"isFieldSelected(item.fieldName)\"\n                    >\n                    <praxis-field-configurator [field]=\"getFieldByName(item.fieldName)\"></praxis-field-configurator>\n                    <button\n                      praxisIconButton=\"edit\"\n                      size=\"dense\"\n                      class=\"field-layout-item__edit\"\n                      type=\"button\"\n                      [matTooltip]=\"t('field.editMetadata')\"\n                      [attr.aria-label]=\"t('field.editMetadata')\"\n                      (click)=\"openFieldEditor(item.fieldName, i, $event)\"\n                      >\n                    </button>\n                  </div>\n                } @else {\n                  @if (item.kind === 'richContent') {\n                    <div\n                      class=\"visual-block-preview\"\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      [class.selected]=\"selected?.type === 'visualBlock' && selected?.itemId === item.id\"\n                      (click)=\"selectVisualBlock(i, item, $event)\"\n                      (dblclick)=\"openVisualBlockEditor(i, item, $event)\"\n                      (keydown.enter)=\"openVisualBlockEditor(i, item, $event)\"\n                      (keydown.space)=\"selectVisualBlock(i, item, $event); $event.preventDefault()\"\n                      >\n                      <button\n                        class=\"visual-block-preview__drag-handle\"\n                        type=\"button\"\n                        cdkDragHandle\n                        [matTooltip]=\"t('visualBlock.dragHandle')\"\n                        [attr.aria-label]=\"t('visualBlock.dragHandle')\"\n                        (click)=\"$event.stopPropagation()\"\n                        >\n                        <mat-icon>drag_indicator</mat-icon>\n                      </button>\n                      <mat-icon aria-hidden=\"true\">notes</mat-icon>\n                      <span class=\"visual-block-preview__text\">\n                        <span class=\"visual-block-preview__eyebrow\">{{ t('visualBlock.previewEyebrow') }}</span>\n                        <span class=\"visual-block-preview__label\">{{ getVisualBlockLabel(item) }}</span>\n                      </span>\n                      <span class=\"visual-block-preview__actions\">\n                        <button\n                          praxisIconButton=\"arrow_upward\"\n                          size=\"dense\"\n                          class=\"visual-block-preview__action visual-block-preview__quick-action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.moveUp')\"\n                          [attr.aria-label]=\"t('visualBlock.moveUp')\"\n                          [disabled]=\"itemIndex === 0\"\n                          (click)=\"moveVisualBlockItem(i, item, -1, $event)\"\n                          >\n                        </button>\n                        <button\n                          praxisIconButton=\"arrow_downward\"\n                          size=\"dense\"\n                          class=\"visual-block-preview__action visual-block-preview__quick-action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.moveDown')\"\n                          [attr.aria-label]=\"t('visualBlock.moveDown')\"\n                          [disabled]=\"itemIndex === getColumnLayoutItems(column).length - 1\"\n                          (click)=\"moveVisualBlockItem(i, item, 1, $event)\"\n                          >\n                        </button>\n                        <button\n                          praxisIconButton=\"edit\"\n                          size=\"dense\"\n                          class=\"visual-block-preview__action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.editAction')\"\n                          [attr.aria-label]=\"t('visualBlock.editAction')\"\n                          (click)=\"openVisualBlockEditor(i, item, $event)\"\n                          >\n                        </button>\n                        <button\n                          praxisIconButton=\"more_vert\"\n                          size=\"dense\"\n                          class=\"visual-block-preview__action\"\n                          type=\"button\"\n                          [matMenuTriggerFor]=\"visualBlockActionsMenu\"\n                          [matTooltip]=\"t('visualBlock.moreActions')\"\n                          [attr.aria-label]=\"t('visualBlock.moreActions')\"\n                          >\n                        </button>\n                        <mat-menu #visualBlockActionsMenu=\"matMenu\">\n                          <button\n                            mat-menu-item\n                            [disabled]=\"itemIndex === 0\"\n                            (click)=\"moveVisualBlockItem(i, item, -1, $event)\"\n                            >\n                            <mat-icon>arrow_upward</mat-icon>\n                            <span>{{ t('visualBlock.moveUp') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"itemIndex === getColumnLayoutItems(column).length - 1\"\n                            (click)=\"moveVisualBlockItem(i, item, 1, $event)\"\n                            >\n                            <mat-icon>arrow_downward</mat-icon>\n                            <span>{{ t('visualBlock.moveDown') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"!canMoveVisualBlockToColumn(i, -1)\"\n                            (click)=\"moveVisualBlockToAdjacentColumn(i, item, -1, $event)\"\n                            >\n                            <mat-icon>arrow_back</mat-icon>\n                            <span>{{ t('visualBlock.movePreviousColumn') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"!canMoveVisualBlockToColumn(i, 1)\"\n                            (click)=\"moveVisualBlockToAdjacentColumn(i, item, 1, $event)\"\n                            >\n                            <mat-icon>arrow_forward</mat-icon>\n                            <span>{{ t('visualBlock.moveNextColumn') }}</span>\n                          </button>\n                          <mat-divider></mat-divider>\n                          <button mat-menu-item (click)=\"removeVisualBlockItem(i, item, $event)\">\n                            <mat-icon color=\"warn\">delete</mat-icon>\n                            <span>{{ t('visualBlock.removeAction') }}</span>\n                          </button>\n                        </mat-menu>\n                      </span>\n                    </div>\n                  }\n                }\n              }\n            } @else {\n              <div class=\"column-placeholder\">\n                <span>{{ t('row.column.empty') }}</span>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"row-empty-placeholder\">\n      <span>{{ t('row.empty') }}</span>\n      <div class=\"row-placeholder-actions\">\n        <button mat-stroked-button (click)=\"addColumn()\" [matTooltip]=\"t('row.menu.addColumn')\">\n          <mat-icon>add</mat-icon> {{ t('row.menu.addColumn') }}\n        </button>\n        <button mat-stroked-button color=\"warn\" (click)=\"removeRow()\" [matTooltip]=\"t('row.menu.removeRow')\">\n          <mat-icon>delete</mat-icon> {{ t('row.menu.removeRow') }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".row-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.bp-toggle{display:inline-flex;gap:4px;align-items:center}.bp-toggle__btn{min-width:34px;height:30px;line-height:30px;padding:0 8px;text-transform:uppercase}.bp-toggle__btn.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.gap-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.gap-chip{display:inline-flex;align-items:center;gap:2px;padding:0 4px;min-height:40px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-variant)}.gap-chip__input{width:42px;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 600 13px/18px system-ui);text-align:center;outline:none;-moz-appearance:textfield}.gap-chip__input::-webkit-outer-spin-button,.gap-chip__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-chip__suffix{color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.gap-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.chip-title{font:var(--mdc-typography-label-medium, 600 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;letter-spacing:.03em}.span-warning{display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-error);background:var(--md-sys-color-error-container);border:1px solid var(--md-sys-color-error);border-radius:6px;padding:4px 8px}.row-container{position:relative;display:flex;align-items:stretch;min-width:0;max-width:100%}.row{display:flex;flex-grow:1;min-width:0;position:relative;padding-right:0;border-radius:6px;transition:box-shadow .2s ease;gap:var(--pfx-grid-gap, 12px)}.row:focus{outline:none;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}.row.selected{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row-label{position:absolute;left:-4px;top:-10px;transform:translateY(-100%);background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;padding:2px 6px;font-size:11px;opacity:0;transition:opacity .15s ease;pointer-events:none}.row:hover .row-label,.row.selected .row-label{opacity:1}.row-actions-meta{margin-left:auto}.column{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;border:1px dashed var(--md-sys-color-outline-variant);margin:0;background:var(--md-sys-color-surface-container);transition:background-color .2s ease,border-color .2s ease;border-radius:8px;overflow:hidden}.column-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--md-sys-color-surface-variant);border-bottom:1px solid var(--md-sys-color-outline-variant);min-height:36px}.column-content{flex:1;display:grid;align-content:start;gap:var(--px-row-field-gap, 6px);padding:8px}.column-status-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:12px;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.column-status-pill:hover,.column-status-pill.active{background:var(--md-sys-color-surface-variant);border-color:var(--md-sys-color-outline)}.status-bp{font-weight:700;text-transform:uppercase;font-size:11px;color:var(--md-sys-color-primary)}.status-divider{color:var(--md-sys-color-outline-variant)}.status-span,.status-offset{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--md-sys-color-on-surface)}.status-span mat-icon{font-size:14px;width:14px;height:14px}.status-hidden{color:var(--md-sys-color-error);display:flex;align-items:center}.status-hidden mat-icon{font-size:14px;width:14px;height:14px}.column-actions{display:flex;align-items:center;opacity:0;transition:opacity .2s ease}.column:hover .column-actions,.column.selected .column-actions,.column-actions:focus-within{opacity:1}.action-btn{width:24px;height:24px;line-height:24px;padding:0}.action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.popover-content{padding:12px;display:flex;flex-direction:column;gap:12px;min-width:200px}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:11px;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;font-weight:600}.control-row{display:flex;align-items:center;justify-content:space-between;background:var(--md-sys-color-surface-container-high);border-radius:8px;padding:2px}.value-display{font-weight:600;font-size:13px}.row.grid-12 .column{flex:unset}.column>div{margin:0}.column:focus{outline:none;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column.drop-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-variant)}.column.selected{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column.cdk-drop-list-receiving{animation:columnHighlight .3s ease-in-out}@keyframes columnHighlight{0%{box-shadow:0 0 0 2px var(--md-sys-color-primary)}to{box-shadow:none}}.field-selected-highlight.selected .field-item,.selected>.field-item{border-color:var(--md-sys-color-primary)!important;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.field-layout-item{position:relative;display:block;min-width:0}:host ::ng-deep .field-layout-item.selected .field-item{border-color:var(--md-sys-color-primary)!important;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.field-layout-item__edit{position:absolute;top:6px;right:6px;opacity:0;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease}.field-layout-item:hover .field-layout-item__edit,.field-layout-item.selected .field-layout-item__edit,.field-layout-item__edit:focus-visible{opacity:1;transform:translateY(0)}.visual-block-preview{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;padding:8px 10px;border:1px solid var(--md-sys-color-outline-variant);border-left:3px solid color-mix(in srgb,var(--md-sys-color-primary) 54%,var(--md-sys-color-outline-variant) 46%);border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface);font-size:13px;cursor:pointer}.visual-block-preview:hover{border-color:color-mix(in srgb,var(--md-sys-color-primary) 38%,var(--md-sys-color-outline-variant) 62%);border-left-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 10%,var(--md-sys-color-surface-container-low, var(--md-sys-color-surface)) 90%)}.visual-block-preview.selected{border-color:var(--md-sys-color-primary);border-left-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.visual-block-preview.cdk-drag-dragging{cursor:grabbing}.visual-block-preview.cdk-drag-preview{box-sizing:border-box;border-color:var(--md-sys-color-primary);border-left-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.visual-block-preview.cdk-drag-placeholder{position:relative;min-height:44px;border-color:transparent;border-left-color:transparent;background:transparent;box-shadow:none;opacity:1}.visual-block-preview.cdk-drag-placeholder>*{visibility:hidden}.visual-block-preview.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 8px auto 8px;height:2px;border-radius:999px;background:var(--md-sys-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent)}.visual-block-preview.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 4px);left:8px;width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-primary)}.visual-block-preview mat-icon{font-size:18px;width:18px;height:18px}.visual-block-preview__drag-handle{border:0;border-radius:50%;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--md-sys-color-on-surface-variant);cursor:grab;opacity:.72;flex:0 0 auto}.visual-block-preview__drag-handle:hover,.visual-block-preview__drag-handle:focus-visible{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 52%,transparent);opacity:1;outline:none}.visual-block-preview__drag-handle:active{cursor:grabbing}.visual-block-preview.selected .visual-block-preview__drag-handle,.visual-block-preview.cdk-drag-dragging .visual-block-preview__drag-handle,.visual-block-preview.cdk-drag-preview .visual-block-preview__drag-handle{color:var(--md-sys-color-primary);opacity:1}.visual-block-preview__text{display:grid;gap:1px;min-width:0}.visual-block-preview__eyebrow{color:var(--md-sys-color-primary);font:var(--mdc-typography-label-small, 700 11px/14px system-ui);text-transform:uppercase}.visual-block-preview__label{overflow:hidden;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 500 13px/18px system-ui);text-overflow:ellipsis;white-space:nowrap}.visual-block-preview__actions{margin-left:auto;display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}.visual-block-preview__quick-action{color:var(--md-sys-color-on-surface-variant);opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s ease}.visual-block-preview:hover .visual-block-preview__quick-action,.visual-block-preview:focus-within .visual-block-preview__quick-action,.visual-block-preview.selected .visual-block-preview__quick-action{opacity:1;visibility:visible}.visual-block-preview__quick-action[disabled]{opacity:.28}@media(max-width:768px),(pointer:coarse){.visual-block-preview__quick-action{display:none}}.row-empty-placeholder{flex:1;border:1px dashed var(--md-sys-color-outline-variant);margin:0;padding:16px;text-align:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container)}.row-placeholder-actions{margin-top:8px;display:flex;gap:8px;justify-content:center}.hidden-overlay{position:absolute;inset:0;background:var(--md-sys-color-surface-container-low);border:1px dashed var(--md-sys-color-outline);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--md-sys-color-on-surface-variant);z-index:2;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FieldConfiguratorComponent, selector: "praxis-field-configurator", inputs: ["field"] }, { 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.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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RowConfiguratorComponent, decorators: [{
             type: Component,
@@ -21281,7 +21267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatMenuModule,
                         MatDialogModule,
                         MatDividerModule,
-                    ], providers: [providePraxisI18nConfig(LAYOUT_EDITOR_I18N_CONFIG)], template: "@if (row) {\n  <div class=\"row-meta\">\n    <div class=\"bp-toggle\" role=\"group\" [attr.aria-label]=\"t('row.breakpoint.ariaLabel')\">\n      @for (bp of breakpoints; track bp) {\n        <button\n          type=\"button\"\n          mat-stroked-button\n          class=\"bp-toggle__btn\"\n          [class.active]=\"previewBreakpoint === bp\"\n          (click)=\"previewBreakpoint = bp\"\n          >\n          {{ bp }}\n        </button>\n      }\n    </div>\n    <div class=\"gap-controls\">\n      @if (hasMultipleColumns()) {\n        <div class=\"gap-chip\" [matTooltip]=\"t('row.gap.columns.tooltip')\"\n          [attr.aria-label]=\"t('row.gap.columns.ariaLabel')\">\n          <span class=\"chip-title\">{{ t('row.gap.columns.title') }}</span>\n          <button mat-icon-button class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('gap', -2)\"\n            [attr.aria-label]=\"t('row.gap.columns.reduce')\">\n            <mat-icon>remove</mat-icon>\n          </button>\n          <input class=\"gap-chip__input\" type=\"number\" min=\"0\" [ngModel]=\"row.gap ?? gapGlobal\"\n            (ngModelChange)=\"updateRowGap('gap', $event)\" [attr.aria-label]=\"t('row.gap.columns.valueAriaLabel')\" />\n          <span class=\"gap-chip__suffix\">px</span>\n          <button mat-icon-button class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('gap', 2)\"\n            [attr.aria-label]=\"t('row.gap.columns.increase')\">\n            <mat-icon>add</mat-icon>\n          </button>\n        </div>\n      }\n      <div class=\"gap-chip\" [matTooltip]=\"t('row.gap.row.tooltip')\" [attr.aria-label]=\"t('row.gap.row.ariaLabel')\">\n        <span class=\"chip-title\">{{ t('row.gap.row.title') }}</span>\n        <button mat-icon-button class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('rowGap', -2)\"\n          [attr.aria-label]=\"t('row.gap.row.reduce')\" [matTooltip]=\"t('row.gap.row.reduceTooltip')\">\n          <mat-icon>remove</mat-icon>\n        </button>\n        <input class=\"gap-chip__input\" type=\"number\" min=\"0\" [ngModel]=\"row.rowGap ?? 0\"\n          (ngModelChange)=\"updateRowGap('rowGap', $event)\" [attr.aria-label]=\"t('row.gap.row.valueAriaLabel')\" />\n        <span class=\"gap-chip__suffix\">px</span>\n        <button mat-icon-button class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('rowGap', 2)\"\n          [attr.aria-label]=\"t('row.gap.row.increase')\" [matTooltip]=\"t('row.gap.row.increaseTooltip')\">\n          <mat-icon>add</mat-icon>\n        </button>\n        <button mat-icon-button class=\"gap-chip__btn\" [matMenuTriggerFor]=\"rowGapMenu\"\n          [matTooltip]=\"t('row.gap.applyMore.tooltip')\" [attr.aria-label]=\"t('row.gap.applyMore.ariaLabel')\">\n          <mat-icon>done_all</mat-icon>\n        </button>\n        <mat-menu #rowGapMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"applyRowGapToAll()\">\n            <mat-icon>done_all</mat-icon>\n            <span>{{ t('row.gap.applyAll') }}</span>\n          </button>\n          <button mat-menu-item (click)=\"clearRowGap()\">\n            <mat-icon>undo</mat-icon>\n            <span>{{ t('row.gap.reset') }}</span>\n          </button>\n        </mat-menu>\n      </div>\n      <div class=\"gap-pill\" [attr.aria-label]=\"t('row.gap.summary.ariaLabel')\">\n        {{ t('row.gap.summary', { fieldsGap: row.rowGap ?? t('row.gap.default'), columnsGap: row.gap ?? gapGlobal }) }}\n      </div>\n      <div class=\"row-actions-meta\">\n        <button mat-icon-button [matMenuTriggerFor]=\"rowMenu\" (click)=\"openRowMenu()\" [matTooltip]=\"t('row.menu.tooltip')\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #rowMenu=\"matMenu\" (closed)=\"onMenuClosed()\">\n          @if (menuContext?.type === 'column') {\n            <button mat-menu-item (click)=\"toggleHidden(menuContext!.columnIndex!)\">\n              <mat-icon>{{ getHiddenFor(row.columns[menuContext!.columnIndex!]) ? 'visibility' : 'visibility_off'\n              }}</mat-icon>\n              <span>{{ getHiddenFor(row.columns[menuContext!.columnIndex!]) ? t('row.menu.showBreakpoint') : t('row.menu.hideBreakpoint') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"removeColumn(menuContext!.columnIndex!)\">\n              <mat-icon color=\"warn\">delete</mat-icon>\n              <span>{{ t('row.menu.removeColumn') }}</span>\n            </button>\n          } @else {\n            <div mat-menu-item disabled>{{ t('row.menu.columnPresets') }}</div>\n            <button mat-menu-item (click)=\"applyPreset([12])\"><mat-icon>view_column</mat-icon><span>1/1</span></button>\n            <button mat-menu-item (click)=\"applyPreset([6,6])\"><mat-icon>view_column</mat-icon><span>1/2 \u2014\n          1/2</span></button>\n          <button mat-menu-item (click)=\"applyPreset([4,8])\"><mat-icon>view_column</mat-icon><span>1/3 \u2014\n        2/3</span></button>\n        <button mat-menu-item (click)=\"applyPreset([8,4])\"><mat-icon>view_column</mat-icon><span>2/3 \u2014\n      1/3</span></button>\n      <button mat-menu-item (click)=\"applyPreset([4,4,4])\"><mat-icon>view_column</mat-icon><span>1/3 \u2014 1/3 \u2014\n    1/3</span></button>\n    <button mat-menu-item (click)=\"applyPreset([3,3,3,3])\"><mat-icon>view_column</mat-icon><span>1/4 \u2014 1/4 \u2014 1/4 \u2014\n  1/4</span></button>\n  <button mat-menu-item (click)=\"addColumn()\"><mat-icon>add</mat-icon><span>{{ t('row.menu.addColumn') }}</span></button>\n  <button mat-menu-item (click)=\"removeRow()\"><mat-icon>delete</mat-icon><span>{{ t('row.menu.removeRow') }}</span></button>\n}\n</mat-menu>\n</div>\n</div>\n@if (getSpanTotal(previewBreakpoint) !== 12) {\n  <div class=\"span-warning\">\n    <mat-icon color=\"warn\">warning</mat-icon>\n    {{ t('row.spanWarning', { total: getSpanTotal(previewBreakpoint) }) }}\n  </div>\n}\n</div>\n}\n\n<div class=\"row-container\" [style.marginBottom.px]=\"!isLastRow ? (row.rowGap || null) : null\">\n  @if (row.columns.length > 0) {\n    <div class=\"row grid-12\" cdkDropListGroup (click)=\"selectRow()\" [class.selected]=\"isRowSelected()\" tabindex=\"0\"\n      role=\"button\" [attr.aria-label]=\"t('row.ariaLabel', { row: rowIndex + 1 })\" [attr.aria-selected]=\"isRowSelected()\"\n      [style.--pfx-grid-gap.px]=\"row.gap || null\" [style.--px-row-field-gap.px]=\"row.rowGap ?? null\">\n      <div class=\"row-label\" aria-hidden=\"true\">{{ t('row.label', { row: rowIndex + 1 }) }}</div>\n      @for (column of row.columns; track column; let i = $index) {\n        <div class=\"column\" [id]=\"getColumnId(i)\" cdkDropList\n          [cdkDropListData]=\"getColumnLayoutItems(column)\" [cdkDropListConnectedTo]=\"connectedColumns(i)\"\n          (cdkDropListDropped)=\"drop($event)\" (cdkDropListEntered)=\"onDropEnter(i)\" (cdkDropListExited)=\"onDropExit(i)\"\n          (click)=\"selectColumn(i, $event)\" [class.drop-active]=\"activeDropIndex === i\"\n          [class.selected]=\"isColumnSelected(i)\" [ngClass]=\"getColumnClassList(column)\"\n          [style.grid-column]=\"'span ' + getSpanFor(column)\" tabindex=\"0\" role=\"button\"\n          [attr.aria-label]=\"t('row.column.ariaLabel', { column: i + 1, row: rowIndex + 1, span: getSpanFor(column) })\"\n          [attr.aria-selected]=\"isColumnSelected(i)\">\n          <div class=\"column-header\">\n            <div class=\"column-status-pill\" [matMenuTriggerFor]=\"columnSettingsMenu\"\n              [matTooltip]=\"t('row.column.settingsTooltip')\" [class.active]=\"isColumnSelected(i)\">\n              <span class=\"status-bp\">{{ previewBreakpoint }}</span>\n              <span class=\"status-divider\">\u00B7</span>\n              <span class=\"status-span\">\n                <mat-icon>view_column</mat-icon>\n                {{ getSpanFor(column) }}/12\n              </span>\n              <span class=\"status-divider\">\u00B7</span>\n              <span class=\"status-offset\">\n                {{ t('row.column.statusOffset', { offset: getOffsetFor(column) }) }}\n              </span>\n              @if (getHiddenFor(column)) {\n                <span class=\"status-hidden\">\n                  <mat-icon>visibility_off</mat-icon>\n                </span>\n              }\n            </div>\n            <div class=\"column-actions\">\n              <button mat-icon-button class=\"action-btn\" [matMenuTriggerFor]=\"columnOverflowMenu\"\n                (click)=\"$event.stopPropagation()\" [matTooltip]=\"t('row.column.optionsTooltip')\"\n                [attr.aria-label]=\"t('row.column.optionsAriaLabel')\">\n                <mat-icon>more_vert</mat-icon>\n              </button>\n            </div>\n          </div>\n          <mat-menu #columnSettingsMenu=\"matMenu\" class=\"column-settings-popover\">\n            <div class=\"popover-content\" (click)=\"$event.stopPropagation()\">\n              @if (getSuggestedSpan(i); as suggested) {\n                <div class=\"control-group\">\n                  <button mat-flat-button color=\"primary\" (click)=\"setSpan(i, suggested)\"\n                    [matTooltip]=\"t('row.column.autoFitTooltip')\">\n                    <mat-icon>auto_fix_high</mat-icon>\n                    {{ t('row.column.autoFitAction', { span: suggested }) }}\n                  </button>\n                </div>\n              }\n              <div class=\"control-group\">\n                <label>{{ t('row.column.widthLabel', { bp: previewBreakpoint }) }}</label>\n                <div class=\"control-row\">\n                  <button mat-icon-button (click)=\"adjustSpan(i, -1)\" [attr.aria-label]=\"t('row.column.reduceWidth')\"><mat-icon>remove</mat-icon></button>\n                  <span class=\"value-display\">{{ getSpanFor(column) }} / 12</span>\n                  <button mat-icon-button (click)=\"adjustSpan(i, 1)\" [attr.aria-label]=\"t('row.column.increaseWidth')\"><mat-icon>add</mat-icon></button>\n                </div>\n              </div>\n              <div class=\"control-group\">\n                <label>{{ t('row.column.offsetLabel', { bp: previewBreakpoint }) }}</label>\n                <div class=\"control-row\">\n                  <button mat-icon-button (click)=\"adjustOffset(i, -1)\" [attr.aria-label]=\"t('row.column.reduceOffset')\"><mat-icon>chevron_left</mat-icon></button>\n                  <span class=\"value-display\">{{ getOffsetFor(column) }}</span>\n                  <button mat-icon-button (click)=\"adjustOffset(i, 1)\" [attr.aria-label]=\"t('row.column.increaseOffset')\"><mat-icon>chevron_right</mat-icon></button>\n                </div>\n              </div>\n              <div class=\"control-group\">\n                <button mat-stroked-button (click)=\"toggleHidden(i)\" [color]=\"getHiddenFor(column) ? 'warn' : ''\">\n                  <mat-icon>{{ getHiddenFor(column) ? 'visibility' : 'visibility_off' }}</mat-icon>\n                  {{ getHiddenFor(column) ? t('row.column.showAction') : t('row.column.hideAction') }}\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n          <mat-menu #columnOverflowMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"openColumnConfig(i)\" [matTooltip]=\"t('row.column.openConfigTooltip')\">\n              <mat-icon>tune</mat-icon>\n              <span>{{ t('row.column.openConfigAction') }}</span>\n            </button>\n            <button mat-menu-item [matMenuTriggerFor]=\"apiFieldMenu\" [matTooltip]=\"t('apiFields.addTooltip')\">\n              <mat-icon>input</mat-icon>\n              <span>{{ t('apiFields.addAction') }}</span>\n            </button>\n            <mat-menu #apiFieldMenu=\"matMenu\">\n              @for (field of availableFields; track field) {\n                <button\n                  mat-menu-item\n                  (click)=\"addApiFieldToColumn(i, field.name)\"\n                  >\n                  <mat-icon>short_text</mat-icon>\n                  <span>{{ getFieldLabel(field) }}</span>\n                </button>\n              }\n              @if (!availableFields.length) {\n                <button mat-menu-item disabled>\n                  <span>{{ t('apiFields.empty') }}</span>\n                </button>\n              }\n            </mat-menu>\n            <button mat-menu-item (click)=\"addLocalFieldToColumn(i)\" [matTooltip]=\"t('localField.addTooltip')\">\n              <mat-icon>edit_note</mat-icon>\n              <span>{{ t('localField.addAction') }}</span>\n            </button>\n            <button mat-menu-item [matMenuTriggerFor]=\"visualBlockPresetMenu\" [matTooltip]=\"t('visualBlock.addTooltip')\">\n              <mat-icon>notes</mat-icon>\n              <span>{{ t('visualBlock.addAction') }}</span>\n            </button>\n            <mat-menu #visualBlockPresetMenu=\"matMenu\">\n              @for (preset of visualBlockPresets; track preset) {\n                <button\n                  mat-menu-item\n                  (click)=\"addVisualBlockToColumn(i, preset.id)\"\n                  >\n                  <mat-icon>{{ preset.icon }}</mat-icon>\n                  <span>{{ t(preset.labelKey) }}</span>\n                </button>\n              }\n            </mat-menu>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)=\"moveColumn(i, -1)\" [disabled]=\"i === 0\"\n              [matTooltip]=\"t('row.column.moveLeftTooltip')\">\n              <mat-icon>arrow_back</mat-icon>\n              <span>{{ t('row.column.moveLeftAction') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"moveColumn(i, 1)\" [disabled]=\"i === row.columns.length - 1\"\n              [matTooltip]=\"t('row.column.moveRightTooltip')\">\n              <mat-icon>arrow_forward</mat-icon>\n              <span>{{ t('row.column.moveRightAction') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"clearColumn(i)\" [disabled]=\"!hasColumnContent(column)\"\n              [matTooltip]=\"t('column.clearTooltip')\">\n              <mat-icon>backspace</mat-icon>\n              <span>{{ t('row.column.clearAction') }}</span>\n            </button>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)=\"removeColumn(i)\" [matTooltip]=\"t('row.column.removeTooltip')\">\n              <mat-icon color=\"warn\">delete</mat-icon>\n              <span>{{ t('row.menu.removeColumn') }}</span>\n            </button>\n          </mat-menu>\n          <div class=\"column-content\">\n            @if (getHiddenFor(column)) {\n              <div class=\"hidden-overlay\">\n                <mat-icon aria-hidden=\"true\">visibility_off</mat-icon>\n                <span>{{ t('row.column.hiddenOverlay', { bp: previewBreakpoint }) }}</span>\n              </div>\n            }\n            @if (hasColumnContent(column)) {\n              @for (item of getColumnLayoutItems(column); track trackLayoutItem(itemIndex, item); let itemIndex = $index) {\n                @if (item.kind === 'field') {\n                  <div\n                    class=\"field-layout-item\"\n                    (click)=\"selectField(item.fieldName, i, $event)\"\n                    [class.selected]=\"isFieldSelected(item.fieldName)\"\n                    >\n                    <praxis-field-configurator [field]=\"getFieldByName(item.fieldName)\"></praxis-field-configurator>\n                    <button\n                      mat-icon-button\n                      class=\"field-layout-item__edit\"\n                      type=\"button\"\n                      [matTooltip]=\"t('field.editMetadata')\"\n                      [attr.aria-label]=\"t('field.editMetadata')\"\n                      (click)=\"openFieldEditor(item.fieldName, i, $event)\"\n                      >\n                      <mat-icon>edit</mat-icon>\n                    </button>\n                  </div>\n                } @else {\n                  @if (item.kind === 'richContent') {\n                    <div\n                      class=\"visual-block-preview\"\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      [class.selected]=\"selected?.type === 'visualBlock' && selected?.itemId === item.id\"\n                      (click)=\"selectVisualBlock(i, item, $event)\"\n                      (dblclick)=\"openVisualBlockEditor(i, item, $event)\"\n                      (keydown.enter)=\"openVisualBlockEditor(i, item, $event)\"\n                      (keydown.space)=\"selectVisualBlock(i, item, $event); $event.preventDefault()\"\n                      >\n                      <button\n                        class=\"visual-block-preview__drag-handle\"\n                        type=\"button\"\n                        cdkDragHandle\n                        [matTooltip]=\"t('visualBlock.dragHandle')\"\n                        [attr.aria-label]=\"t('visualBlock.dragHandle')\"\n                        (click)=\"$event.stopPropagation()\"\n                        >\n                        <mat-icon>drag_indicator</mat-icon>\n                      </button>\n                      <mat-icon aria-hidden=\"true\">notes</mat-icon>\n                      <span class=\"visual-block-preview__text\">\n                        <span class=\"visual-block-preview__eyebrow\">{{ t('visualBlock.previewEyebrow') }}</span>\n                        <span class=\"visual-block-preview__label\">{{ getVisualBlockLabel(item) }}</span>\n                      </span>\n                      <span class=\"visual-block-preview__actions\">\n                        <button\n                          mat-icon-button\n                          class=\"visual-block-preview__action visual-block-preview__quick-action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.moveUp')\"\n                          [attr.aria-label]=\"t('visualBlock.moveUp')\"\n                          [disabled]=\"itemIndex === 0\"\n                          (click)=\"moveVisualBlockItem(i, item, -1, $event)\"\n                          >\n                          <mat-icon>arrow_upward</mat-icon>\n                        </button>\n                        <button\n                          mat-icon-button\n                          class=\"visual-block-preview__action visual-block-preview__quick-action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.moveDown')\"\n                          [attr.aria-label]=\"t('visualBlock.moveDown')\"\n                          [disabled]=\"itemIndex === getColumnLayoutItems(column).length - 1\"\n                          (click)=\"moveVisualBlockItem(i, item, 1, $event)\"\n                          >\n                          <mat-icon>arrow_downward</mat-icon>\n                        </button>\n                        <button\n                          mat-icon-button\n                          class=\"visual-block-preview__action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.editAction')\"\n                          [attr.aria-label]=\"t('visualBlock.editAction')\"\n                          (click)=\"openVisualBlockEditor(i, item, $event)\"\n                          >\n                          <mat-icon>edit</mat-icon>\n                        </button>\n                        <button\n                          mat-icon-button\n                          class=\"visual-block-preview__action\"\n                          type=\"button\"\n                          [matMenuTriggerFor]=\"visualBlockActionsMenu\"\n                          [matTooltip]=\"t('visualBlock.moreActions')\"\n                          [attr.aria-label]=\"t('visualBlock.moreActions')\"\n                          >\n                          <mat-icon>more_vert</mat-icon>\n                        </button>\n                        <mat-menu #visualBlockActionsMenu=\"matMenu\">\n                          <button\n                            mat-menu-item\n                            [disabled]=\"itemIndex === 0\"\n                            (click)=\"moveVisualBlockItem(i, item, -1, $event)\"\n                            >\n                            <mat-icon>arrow_upward</mat-icon>\n                            <span>{{ t('visualBlock.moveUp') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"itemIndex === getColumnLayoutItems(column).length - 1\"\n                            (click)=\"moveVisualBlockItem(i, item, 1, $event)\"\n                            >\n                            <mat-icon>arrow_downward</mat-icon>\n                            <span>{{ t('visualBlock.moveDown') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"!canMoveVisualBlockToColumn(i, -1)\"\n                            (click)=\"moveVisualBlockToAdjacentColumn(i, item, -1, $event)\"\n                            >\n                            <mat-icon>arrow_back</mat-icon>\n                            <span>{{ t('visualBlock.movePreviousColumn') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"!canMoveVisualBlockToColumn(i, 1)\"\n                            (click)=\"moveVisualBlockToAdjacentColumn(i, item, 1, $event)\"\n                            >\n                            <mat-icon>arrow_forward</mat-icon>\n                            <span>{{ t('visualBlock.moveNextColumn') }}</span>\n                          </button>\n                          <mat-divider></mat-divider>\n                          <button mat-menu-item (click)=\"removeVisualBlockItem(i, item, $event)\">\n                            <mat-icon color=\"warn\">delete</mat-icon>\n                            <span>{{ t('visualBlock.removeAction') }}</span>\n                          </button>\n                        </mat-menu>\n                      </span>\n                    </div>\n                  }\n                }\n              }\n            } @else {\n              <div class=\"column-placeholder\">\n                <span>{{ t('row.column.empty') }}</span>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"row-empty-placeholder\">\n      <span>{{ t('row.empty') }}</span>\n      <div class=\"row-placeholder-actions\">\n        <button mat-stroked-button (click)=\"addColumn()\" [matTooltip]=\"t('row.menu.addColumn')\">\n          <mat-icon>add</mat-icon> {{ t('row.menu.addColumn') }}\n        </button>\n        <button mat-stroked-button color=\"warn\" (click)=\"removeRow()\" [matTooltip]=\"t('row.menu.removeRow')\">\n          <mat-icon>delete</mat-icon> {{ t('row.menu.removeRow') }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".row-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.bp-toggle{display:inline-flex;gap:4px;align-items:center}.bp-toggle__btn{min-width:34px;height:30px;line-height:30px;padding:0 8px;text-transform:uppercase}.bp-toggle__btn.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.gap-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.gap-chip{display:inline-flex;align-items:center;gap:2px;padding:0 4px;height:32px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-variant)}.gap-chip__btn{width:24px;height:24px;line-height:24px;min-width:0;padding:0;--mdc-icon-button-size: 24px;--mdc-icon-button-state-layer-size: 24px}.gap-chip .mat-mdc-button-touch-target{width:24px;height:24px}.gap-chip mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.gap-chip__input{width:42px;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 600 13px/18px system-ui);text-align:center;outline:none;-moz-appearance:textfield}.gap-chip__input::-webkit-outer-spin-button,.gap-chip__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-chip__suffix{color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.gap-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.chip-title{font:var(--mdc-typography-label-medium, 600 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;letter-spacing:.03em}.span-warning{display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-error);background:var(--md-sys-color-error-container);border:1px solid var(--md-sys-color-error);border-radius:6px;padding:4px 8px}.row-container{position:relative;display:flex;align-items:stretch;min-width:0;max-width:100%}.row{display:flex;flex-grow:1;min-width:0;position:relative;padding-right:0;border-radius:6px;transition:box-shadow .2s ease;gap:var(--pfx-grid-gap, 12px)}.row:focus{outline:none;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}.row.selected{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row-label{position:absolute;left:-4px;top:-10px;transform:translateY(-100%);background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;padding:2px 6px;font-size:11px;opacity:0;transition:opacity .15s ease;pointer-events:none}.row:hover .row-label,.row.selected .row-label{opacity:1}.row-actions-meta{margin-left:auto}.column{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;border:1px dashed var(--md-sys-color-outline-variant);margin:0;background:var(--md-sys-color-surface-container);transition:background-color .2s ease,border-color .2s ease;border-radius:8px;overflow:hidden}.column-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--md-sys-color-surface-variant);border-bottom:1px solid var(--md-sys-color-outline-variant);min-height:36px}.column-content{flex:1;display:grid;align-content:start;gap:var(--px-row-field-gap, 6px);padding:8px}.column-status-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:12px;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.column-status-pill:hover,.column-status-pill.active{background:var(--md-sys-color-surface-variant);border-color:var(--md-sys-color-outline)}.status-bp{font-weight:700;text-transform:uppercase;font-size:11px;color:var(--md-sys-color-primary)}.status-divider{color:var(--md-sys-color-outline-variant)}.status-span,.status-offset{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--md-sys-color-on-surface)}.status-span mat-icon{font-size:14px;width:14px;height:14px}.status-hidden{color:var(--md-sys-color-error);display:flex;align-items:center}.status-hidden mat-icon{font-size:14px;width:14px;height:14px}.column-actions{display:flex;align-items:center;opacity:0;transition:opacity .2s ease}.column:hover .column-actions,.column.selected .column-actions,.column-actions:focus-within{opacity:1}.action-btn{width:24px;height:24px;line-height:24px;padding:0}.action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.popover-content{padding:12px;display:flex;flex-direction:column;gap:12px;min-width:200px}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:11px;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;font-weight:600}.control-row{display:flex;align-items:center;justify-content:space-between;background:var(--md-sys-color-surface-container-high);border-radius:8px;padding:2px}.value-display{font-weight:600;font-size:13px}.row.grid-12 .column{flex:unset}.column>div{margin:0}.column:focus{outline:none;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column.drop-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-variant)}.column.selected{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column.cdk-drop-list-receiving{animation:columnHighlight .3s ease-in-out}@keyframes columnHighlight{0%{box-shadow:0 0 0 2px var(--md-sys-color-primary)}to{box-shadow:none}}.field-selected-highlight.selected .field-item,.selected>.field-item{border-color:var(--md-sys-color-primary)!important;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.field-layout-item{position:relative;display:block;min-width:0}:host ::ng-deep .field-layout-item.selected .field-item{border-color:var(--md-sys-color-primary)!important;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.field-layout-item__edit{position:absolute;top:6px;right:6px;width:30px;height:30px;padding:0;line-height:1;min-width:30px;opacity:0;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease;--mdc-icon-button-size: 30px;--mdc-icon-button-state-layer-size: 30px;--mdc-icon-button-icon-size: 18px;--mat-icon-button-state-layer-size: 30px;--mat-icon-button-icon-size: 18px}.field-layout-item:hover .field-layout-item__edit,.field-layout-item.selected .field-layout-item__edit,.field-layout-item__edit:focus-visible{opacity:1;transform:translateY(0)}.visual-block-preview{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;padding:8px 10px;border:1px solid var(--md-sys-color-outline-variant);border-left:3px solid color-mix(in srgb,var(--md-sys-color-primary) 54%,var(--md-sys-color-outline-variant) 46%);border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface);font-size:13px;cursor:pointer}.visual-block-preview:hover{border-color:color-mix(in srgb,var(--md-sys-color-primary) 38%,var(--md-sys-color-outline-variant) 62%);border-left-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 10%,var(--md-sys-color-surface-container-low, var(--md-sys-color-surface)) 90%)}.visual-block-preview.selected{border-color:var(--md-sys-color-primary);border-left-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.visual-block-preview.cdk-drag-dragging{cursor:grabbing}.visual-block-preview.cdk-drag-preview{box-sizing:border-box;border-color:var(--md-sys-color-primary);border-left-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.visual-block-preview.cdk-drag-placeholder{position:relative;min-height:44px;border-color:transparent;border-left-color:transparent;background:transparent;box-shadow:none;opacity:1}.visual-block-preview.cdk-drag-placeholder>*{visibility:hidden}.visual-block-preview.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 8px auto 8px;height:2px;border-radius:999px;background:var(--md-sys-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent)}.visual-block-preview.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 4px);left:8px;width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-primary)}.visual-block-preview mat-icon{font-size:18px;width:18px;height:18px}.visual-block-preview__drag-handle{border:0;border-radius:50%;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--md-sys-color-on-surface-variant);cursor:grab;opacity:.72;flex:0 0 auto}.visual-block-preview__drag-handle:hover,.visual-block-preview__drag-handle:focus-visible{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 52%,transparent);opacity:1;outline:none}.visual-block-preview__drag-handle:active{cursor:grabbing}.visual-block-preview.selected .visual-block-preview__drag-handle,.visual-block-preview.cdk-drag-dragging .visual-block-preview__drag-handle,.visual-block-preview.cdk-drag-preview .visual-block-preview__drag-handle{color:var(--md-sys-color-primary);opacity:1}.visual-block-preview__text{display:grid;gap:1px;min-width:0}.visual-block-preview__eyebrow{color:var(--md-sys-color-primary);font:var(--mdc-typography-label-small, 700 11px/14px system-ui);text-transform:uppercase}.visual-block-preview__label{overflow:hidden;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 500 13px/18px system-ui);text-overflow:ellipsis;white-space:nowrap}.visual-block-preview__actions{margin-left:auto;display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}.visual-block-preview__action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;line-height:1;min-width:30px;--mdc-icon-button-size: 30px;--mdc-icon-button-state-layer-size: 30px;--mdc-icon-button-icon-size: 18px;--mat-icon-button-state-layer-size: 30px;--mat-icon-button-icon-size: 18px}.visual-block-preview__action mat-icon{display:inline-flex;align-items:center;justify-content:center;margin:0;line-height:18px}:host ::ng-deep .visual-block-preview__action .mat-mdc-button-touch-target{width:30px;height:30px}:host ::ng-deep .visual-block-preview__action .mat-mdc-button-persistent-ripple,:host ::ng-deep .visual-block-preview__action .mat-mdc-button-persistent-ripple:before,:host ::ng-deep .visual-block-preview__action .mat-ripple{inset:0;border-radius:50%}.visual-block-preview__quick-action{color:var(--md-sys-color-on-surface-variant);opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s ease}.visual-block-preview:hover .visual-block-preview__quick-action,.visual-block-preview:focus-within .visual-block-preview__quick-action,.visual-block-preview.selected .visual-block-preview__quick-action{opacity:1;visibility:visible}.visual-block-preview__quick-action[disabled]{opacity:.28}@media(max-width:768px),(pointer:coarse){.visual-block-preview__quick-action{display:none}}.row-empty-placeholder{flex:1;border:1px dashed var(--md-sys-color-outline-variant);margin:0;padding:16px;text-align:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container)}.row-placeholder-actions{margin-top:8px;display:flex;gap:8px;justify-content:center}.hidden-overlay{position:absolute;inset:0;background:var(--md-sys-color-surface-container-low);border:1px dashed var(--md-sys-color-outline);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--md-sys-color-on-surface-variant);z-index:2;pointer-events:none}\n"] }]
+                        PraxisIconButtonComponent,
+                    ], providers: [providePraxisI18nConfig(LAYOUT_EDITOR_I18N_CONFIG)], template: "@if (row) {\n  <div class=\"row-meta\">\n    <div class=\"bp-toggle\" role=\"group\" [attr.aria-label]=\"t('row.breakpoint.ariaLabel')\">\n      @for (bp of breakpoints; track bp) {\n        <button\n          type=\"button\"\n          mat-stroked-button\n          class=\"bp-toggle__btn\"\n          [class.active]=\"previewBreakpoint === bp\"\n          (click)=\"previewBreakpoint = bp\"\n          >\n          {{ bp }}\n        </button>\n      }\n    </div>\n    <div class=\"gap-controls\">\n      @if (hasMultipleColumns()) {\n        <div class=\"gap-chip\" [matTooltip]=\"t('row.gap.columns.tooltip')\"\n          [attr.aria-label]=\"t('row.gap.columns.ariaLabel')\">\n          <span class=\"chip-title\">{{ t('row.gap.columns.title') }}</span>\n          <button praxisIconButton=\"remove\" size=\"dense\" class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('gap', -2)\"\n            [attr.aria-label]=\"t('row.gap.columns.reduce')\">\n          </button>\n          <input class=\"gap-chip__input\" type=\"number\" min=\"0\" [ngModel]=\"row.gap ?? gapGlobal\"\n            (ngModelChange)=\"updateRowGap('gap', $event)\" [attr.aria-label]=\"t('row.gap.columns.valueAriaLabel')\" />\n          <span class=\"gap-chip__suffix\">px</span>\n          <button praxisIconButton=\"add\" size=\"dense\" class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('gap', 2)\"\n            [attr.aria-label]=\"t('row.gap.columns.increase')\">\n          </button>\n        </div>\n      }\n      <div class=\"gap-chip\" [matTooltip]=\"t('row.gap.row.tooltip')\" [attr.aria-label]=\"t('row.gap.row.ariaLabel')\">\n        <span class=\"chip-title\">{{ t('row.gap.row.title') }}</span>\n        <button praxisIconButton=\"remove\" size=\"dense\" class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('rowGap', -2)\"\n          [attr.aria-label]=\"t('row.gap.row.reduce')\" [matTooltip]=\"t('row.gap.row.reduceTooltip')\">\n        </button>\n        <input class=\"gap-chip__input\" type=\"number\" min=\"0\" [ngModel]=\"row.rowGap ?? 0\"\n          (ngModelChange)=\"updateRowGap('rowGap', $event)\" [attr.aria-label]=\"t('row.gap.row.valueAriaLabel')\" />\n        <span class=\"gap-chip__suffix\">px</span>\n        <button praxisIconButton=\"add\" size=\"dense\" class=\"gap-chip__btn\" (click)=\"adjustRowGapDelta('rowGap', 2)\"\n          [attr.aria-label]=\"t('row.gap.row.increase')\" [matTooltip]=\"t('row.gap.row.increaseTooltip')\">\n        </button>\n        <button praxisIconButton=\"done_all\" size=\"dense\" class=\"gap-chip__btn\" [matMenuTriggerFor]=\"rowGapMenu\"\n          [matTooltip]=\"t('row.gap.applyMore.tooltip')\" [attr.aria-label]=\"t('row.gap.applyMore.ariaLabel')\">\n        </button>\n        <mat-menu #rowGapMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"applyRowGapToAll()\">\n            <mat-icon>done_all</mat-icon>\n            <span>{{ t('row.gap.applyAll') }}</span>\n          </button>\n          <button mat-menu-item (click)=\"clearRowGap()\">\n            <mat-icon>undo</mat-icon>\n            <span>{{ t('row.gap.reset') }}</span>\n          </button>\n        </mat-menu>\n      </div>\n      <div class=\"gap-pill\" [attr.aria-label]=\"t('row.gap.summary.ariaLabel')\">\n        {{ t('row.gap.summary', { fieldsGap: row.rowGap ?? t('row.gap.default'), columnsGap: row.gap ?? gapGlobal }) }}\n      </div>\n      <div class=\"row-actions-meta\">\n        <button praxisIconButton=\"more_vert\" size=\"dense\" [matMenuTriggerFor]=\"rowMenu\" (click)=\"openRowMenu()\" [matTooltip]=\"t('row.menu.tooltip')\">\n        </button>\n        <mat-menu #rowMenu=\"matMenu\" (closed)=\"onMenuClosed()\">\n          @if (menuContext?.type === 'column') {\n            <button mat-menu-item (click)=\"toggleHidden(menuContext!.columnIndex!)\">\n              <mat-icon>{{ getHiddenFor(row.columns[menuContext!.columnIndex!]) ? 'visibility' : 'visibility_off'\n              }}</mat-icon>\n              <span>{{ getHiddenFor(row.columns[menuContext!.columnIndex!]) ? t('row.menu.showBreakpoint') : t('row.menu.hideBreakpoint') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"removeColumn(menuContext!.columnIndex!)\">\n              <mat-icon color=\"warn\">delete</mat-icon>\n              <span>{{ t('row.menu.removeColumn') }}</span>\n            </button>\n          } @else {\n            <div mat-menu-item disabled>{{ t('row.menu.columnPresets') }}</div>\n            <button mat-menu-item (click)=\"applyPreset([12])\"><mat-icon>view_column</mat-icon><span>1/1</span></button>\n            <button mat-menu-item (click)=\"applyPreset([6,6])\"><mat-icon>view_column</mat-icon><span>1/2 \u2014\n          1/2</span></button>\n          <button mat-menu-item (click)=\"applyPreset([4,8])\"><mat-icon>view_column</mat-icon><span>1/3 \u2014\n        2/3</span></button>\n        <button mat-menu-item (click)=\"applyPreset([8,4])\"><mat-icon>view_column</mat-icon><span>2/3 \u2014\n      1/3</span></button>\n      <button mat-menu-item (click)=\"applyPreset([4,4,4])\"><mat-icon>view_column</mat-icon><span>1/3 \u2014 1/3 \u2014\n    1/3</span></button>\n    <button mat-menu-item (click)=\"applyPreset([3,3,3,3])\"><mat-icon>view_column</mat-icon><span>1/4 \u2014 1/4 \u2014 1/4 \u2014\n  1/4</span></button>\n  <button mat-menu-item (click)=\"addColumn()\"><mat-icon>add</mat-icon><span>{{ t('row.menu.addColumn') }}</span></button>\n  <button mat-menu-item (click)=\"removeRow()\"><mat-icon>delete</mat-icon><span>{{ t('row.menu.removeRow') }}</span></button>\n}\n</mat-menu>\n</div>\n</div>\n@if (getSpanTotal(previewBreakpoint) !== 12) {\n  <div class=\"span-warning\">\n    <mat-icon color=\"warn\">warning</mat-icon>\n    {{ t('row.spanWarning', { total: getSpanTotal(previewBreakpoint) }) }}\n  </div>\n}\n</div>\n}\n\n<div class=\"row-container\" [style.marginBottom.px]=\"!isLastRow ? (row.rowGap || null) : null\">\n  @if (row.columns.length > 0) {\n    <div class=\"row grid-12\" cdkDropListGroup (click)=\"selectRow()\" [class.selected]=\"isRowSelected()\" tabindex=\"0\"\n      role=\"button\" [attr.aria-label]=\"t('row.ariaLabel', { row: rowIndex + 1 })\" [attr.aria-selected]=\"isRowSelected()\"\n      [style.--pfx-grid-gap.px]=\"row.gap || null\" [style.--px-row-field-gap.px]=\"row.rowGap ?? null\">\n      <div class=\"row-label\" aria-hidden=\"true\">{{ t('row.label', { row: rowIndex + 1 }) }}</div>\n      @for (column of row.columns; track column; let i = $index) {\n        <div class=\"column\" [id]=\"getColumnId(i)\" cdkDropList\n          [cdkDropListData]=\"getColumnLayoutItems(column)\" [cdkDropListConnectedTo]=\"connectedColumns(i)\"\n          (cdkDropListDropped)=\"drop($event)\" (cdkDropListEntered)=\"onDropEnter(i)\" (cdkDropListExited)=\"onDropExit(i)\"\n          (click)=\"selectColumn(i, $event)\" [class.drop-active]=\"activeDropIndex === i\"\n          [class.selected]=\"isColumnSelected(i)\" [ngClass]=\"getColumnClassList(column)\"\n          [style.grid-column]=\"'span ' + getSpanFor(column)\" tabindex=\"0\" role=\"button\"\n          [attr.aria-label]=\"t('row.column.ariaLabel', { column: i + 1, row: rowIndex + 1, span: getSpanFor(column) })\"\n          [attr.aria-selected]=\"isColumnSelected(i)\">\n          <div class=\"column-header\">\n            <div class=\"column-status-pill\" [matMenuTriggerFor]=\"columnSettingsMenu\"\n              [matTooltip]=\"t('row.column.settingsTooltip')\" [class.active]=\"isColumnSelected(i)\">\n              <span class=\"status-bp\">{{ previewBreakpoint }}</span>\n              <span class=\"status-divider\">\u00B7</span>\n              <span class=\"status-span\">\n                <mat-icon>view_column</mat-icon>\n                {{ getSpanFor(column) }}/12\n              </span>\n              <span class=\"status-divider\">\u00B7</span>\n              <span class=\"status-offset\">\n                {{ t('row.column.statusOffset', { offset: getOffsetFor(column) }) }}\n              </span>\n              @if (getHiddenFor(column)) {\n                <span class=\"status-hidden\">\n                  <mat-icon>visibility_off</mat-icon>\n                </span>\n              }\n            </div>\n            <div class=\"column-actions\">\n              <button praxisIconButton=\"more_vert\" size=\"dense\" class=\"action-btn\" [matMenuTriggerFor]=\"columnOverflowMenu\"\n                (click)=\"$event.stopPropagation()\" [matTooltip]=\"t('row.column.optionsTooltip')\"\n                [attr.aria-label]=\"t('row.column.optionsAriaLabel')\">\n              </button>\n            </div>\n          </div>\n          <mat-menu #columnSettingsMenu=\"matMenu\" class=\"column-settings-popover\">\n            <div class=\"popover-content\" (click)=\"$event.stopPropagation()\">\n              @if (getSuggestedSpan(i); as suggested) {\n                <div class=\"control-group\">\n                  <button mat-flat-button color=\"primary\" (click)=\"setSpan(i, suggested)\"\n                    [matTooltip]=\"t('row.column.autoFitTooltip')\">\n                    <mat-icon>auto_fix_high</mat-icon>\n                    {{ t('row.column.autoFitAction', { span: suggested }) }}\n                  </button>\n                </div>\n              }\n              <div class=\"control-group\">\n                <label>{{ t('row.column.widthLabel', { bp: previewBreakpoint }) }}</label>\n                <div class=\"control-row\">\n                  <button praxisIconButton=\"remove\" size=\"dense\" (click)=\"adjustSpan(i, -1)\" [attr.aria-label]=\"t('row.column.reduceWidth')\"></button>\n                  <span class=\"value-display\">{{ getSpanFor(column) }} / 12</span>\n                  <button praxisIconButton=\"add\" size=\"dense\" (click)=\"adjustSpan(i, 1)\" [attr.aria-label]=\"t('row.column.increaseWidth')\"></button>\n                </div>\n              </div>\n              <div class=\"control-group\">\n                <label>{{ t('row.column.offsetLabel', { bp: previewBreakpoint }) }}</label>\n                <div class=\"control-row\">\n                  <button praxisIconButton=\"chevron_left\" size=\"dense\" (click)=\"adjustOffset(i, -1)\" [attr.aria-label]=\"t('row.column.reduceOffset')\"></button>\n                  <span class=\"value-display\">{{ getOffsetFor(column) }}</span>\n                  <button praxisIconButton=\"chevron_right\" size=\"dense\" (click)=\"adjustOffset(i, 1)\" [attr.aria-label]=\"t('row.column.increaseOffset')\"></button>\n                </div>\n              </div>\n              <div class=\"control-group\">\n                <button mat-stroked-button (click)=\"toggleHidden(i)\" [color]=\"getHiddenFor(column) ? 'warn' : ''\">\n                  <mat-icon>{{ getHiddenFor(column) ? 'visibility' : 'visibility_off' }}</mat-icon>\n                  {{ getHiddenFor(column) ? t('row.column.showAction') : t('row.column.hideAction') }}\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n          <mat-menu #columnOverflowMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"openColumnConfig(i)\" [matTooltip]=\"t('row.column.openConfigTooltip')\">\n              <mat-icon>tune</mat-icon>\n              <span>{{ t('row.column.openConfigAction') }}</span>\n            </button>\n            <button mat-menu-item [matMenuTriggerFor]=\"apiFieldMenu\" [matTooltip]=\"t('apiFields.addTooltip')\">\n              <mat-icon>input</mat-icon>\n              <span>{{ t('apiFields.addAction') }}</span>\n            </button>\n            <mat-menu #apiFieldMenu=\"matMenu\">\n              @for (field of availableFields; track field) {\n                <button\n                  mat-menu-item\n                  (click)=\"addApiFieldToColumn(i, field.name)\"\n                  >\n                  <mat-icon>short_text</mat-icon>\n                  <span>{{ getFieldLabel(field) }}</span>\n                </button>\n              }\n              @if (!availableFields.length) {\n                <button mat-menu-item disabled>\n                  <span>{{ t('apiFields.empty') }}</span>\n                </button>\n              }\n            </mat-menu>\n            <button mat-menu-item (click)=\"addLocalFieldToColumn(i)\" [matTooltip]=\"t('localField.addTooltip')\">\n              <mat-icon>edit_note</mat-icon>\n              <span>{{ t('localField.addAction') }}</span>\n            </button>\n            <button mat-menu-item [matMenuTriggerFor]=\"visualBlockPresetMenu\" [matTooltip]=\"t('visualBlock.addTooltip')\">\n              <mat-icon>notes</mat-icon>\n              <span>{{ t('visualBlock.addAction') }}</span>\n            </button>\n            <mat-menu #visualBlockPresetMenu=\"matMenu\">\n              @for (preset of visualBlockPresets; track preset) {\n                <button\n                  mat-menu-item\n                  (click)=\"addVisualBlockToColumn(i, preset.id)\"\n                  >\n                  <mat-icon>{{ preset.icon }}</mat-icon>\n                  <span>{{ t(preset.labelKey) }}</span>\n                </button>\n              }\n            </mat-menu>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)=\"moveColumn(i, -1)\" [disabled]=\"i === 0\"\n              [matTooltip]=\"t('row.column.moveLeftTooltip')\">\n              <mat-icon>arrow_back</mat-icon>\n              <span>{{ t('row.column.moveLeftAction') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"moveColumn(i, 1)\" [disabled]=\"i === row.columns.length - 1\"\n              [matTooltip]=\"t('row.column.moveRightTooltip')\">\n              <mat-icon>arrow_forward</mat-icon>\n              <span>{{ t('row.column.moveRightAction') }}</span>\n            </button>\n            <button mat-menu-item (click)=\"clearColumn(i)\" [disabled]=\"!hasColumnContent(column)\"\n              [matTooltip]=\"t('column.clearTooltip')\">\n              <mat-icon>backspace</mat-icon>\n              <span>{{ t('row.column.clearAction') }}</span>\n            </button>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)=\"removeColumn(i)\" [matTooltip]=\"t('row.column.removeTooltip')\">\n              <mat-icon color=\"warn\">delete</mat-icon>\n              <span>{{ t('row.menu.removeColumn') }}</span>\n            </button>\n          </mat-menu>\n          <div class=\"column-content\">\n            @if (getHiddenFor(column)) {\n              <div class=\"hidden-overlay\">\n                <mat-icon aria-hidden=\"true\">visibility_off</mat-icon>\n                <span>{{ t('row.column.hiddenOverlay', { bp: previewBreakpoint }) }}</span>\n              </div>\n            }\n            @if (hasColumnContent(column)) {\n              @for (item of getColumnLayoutItems(column); track trackLayoutItem(itemIndex, item); let itemIndex = $index) {\n                @if (item.kind === 'field') {\n                  <div\n                    class=\"field-layout-item\"\n                    (click)=\"selectField(item.fieldName, i, $event)\"\n                    [class.selected]=\"isFieldSelected(item.fieldName)\"\n                    >\n                    <praxis-field-configurator [field]=\"getFieldByName(item.fieldName)\"></praxis-field-configurator>\n                    <button\n                      praxisIconButton=\"edit\"\n                      size=\"dense\"\n                      class=\"field-layout-item__edit\"\n                      type=\"button\"\n                      [matTooltip]=\"t('field.editMetadata')\"\n                      [attr.aria-label]=\"t('field.editMetadata')\"\n                      (click)=\"openFieldEditor(item.fieldName, i, $event)\"\n                      >\n                    </button>\n                  </div>\n                } @else {\n                  @if (item.kind === 'richContent') {\n                    <div\n                      class=\"visual-block-preview\"\n                      cdkDrag\n                      [cdkDragData]=\"item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      [class.selected]=\"selected?.type === 'visualBlock' && selected?.itemId === item.id\"\n                      (click)=\"selectVisualBlock(i, item, $event)\"\n                      (dblclick)=\"openVisualBlockEditor(i, item, $event)\"\n                      (keydown.enter)=\"openVisualBlockEditor(i, item, $event)\"\n                      (keydown.space)=\"selectVisualBlock(i, item, $event); $event.preventDefault()\"\n                      >\n                      <button\n                        class=\"visual-block-preview__drag-handle\"\n                        type=\"button\"\n                        cdkDragHandle\n                        [matTooltip]=\"t('visualBlock.dragHandle')\"\n                        [attr.aria-label]=\"t('visualBlock.dragHandle')\"\n                        (click)=\"$event.stopPropagation()\"\n                        >\n                        <mat-icon>drag_indicator</mat-icon>\n                      </button>\n                      <mat-icon aria-hidden=\"true\">notes</mat-icon>\n                      <span class=\"visual-block-preview__text\">\n                        <span class=\"visual-block-preview__eyebrow\">{{ t('visualBlock.previewEyebrow') }}</span>\n                        <span class=\"visual-block-preview__label\">{{ getVisualBlockLabel(item) }}</span>\n                      </span>\n                      <span class=\"visual-block-preview__actions\">\n                        <button\n                          praxisIconButton=\"arrow_upward\"\n                          size=\"dense\"\n                          class=\"visual-block-preview__action visual-block-preview__quick-action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.moveUp')\"\n                          [attr.aria-label]=\"t('visualBlock.moveUp')\"\n                          [disabled]=\"itemIndex === 0\"\n                          (click)=\"moveVisualBlockItem(i, item, -1, $event)\"\n                          >\n                        </button>\n                        <button\n                          praxisIconButton=\"arrow_downward\"\n                          size=\"dense\"\n                          class=\"visual-block-preview__action visual-block-preview__quick-action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.moveDown')\"\n                          [attr.aria-label]=\"t('visualBlock.moveDown')\"\n                          [disabled]=\"itemIndex === getColumnLayoutItems(column).length - 1\"\n                          (click)=\"moveVisualBlockItem(i, item, 1, $event)\"\n                          >\n                        </button>\n                        <button\n                          praxisIconButton=\"edit\"\n                          size=\"dense\"\n                          class=\"visual-block-preview__action\"\n                          type=\"button\"\n                          [matTooltip]=\"t('visualBlock.editAction')\"\n                          [attr.aria-label]=\"t('visualBlock.editAction')\"\n                          (click)=\"openVisualBlockEditor(i, item, $event)\"\n                          >\n                        </button>\n                        <button\n                          praxisIconButton=\"more_vert\"\n                          size=\"dense\"\n                          class=\"visual-block-preview__action\"\n                          type=\"button\"\n                          [matMenuTriggerFor]=\"visualBlockActionsMenu\"\n                          [matTooltip]=\"t('visualBlock.moreActions')\"\n                          [attr.aria-label]=\"t('visualBlock.moreActions')\"\n                          >\n                        </button>\n                        <mat-menu #visualBlockActionsMenu=\"matMenu\">\n                          <button\n                            mat-menu-item\n                            [disabled]=\"itemIndex === 0\"\n                            (click)=\"moveVisualBlockItem(i, item, -1, $event)\"\n                            >\n                            <mat-icon>arrow_upward</mat-icon>\n                            <span>{{ t('visualBlock.moveUp') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"itemIndex === getColumnLayoutItems(column).length - 1\"\n                            (click)=\"moveVisualBlockItem(i, item, 1, $event)\"\n                            >\n                            <mat-icon>arrow_downward</mat-icon>\n                            <span>{{ t('visualBlock.moveDown') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"!canMoveVisualBlockToColumn(i, -1)\"\n                            (click)=\"moveVisualBlockToAdjacentColumn(i, item, -1, $event)\"\n                            >\n                            <mat-icon>arrow_back</mat-icon>\n                            <span>{{ t('visualBlock.movePreviousColumn') }}</span>\n                          </button>\n                          <button\n                            mat-menu-item\n                            [disabled]=\"!canMoveVisualBlockToColumn(i, 1)\"\n                            (click)=\"moveVisualBlockToAdjacentColumn(i, item, 1, $event)\"\n                            >\n                            <mat-icon>arrow_forward</mat-icon>\n                            <span>{{ t('visualBlock.moveNextColumn') }}</span>\n                          </button>\n                          <mat-divider></mat-divider>\n                          <button mat-menu-item (click)=\"removeVisualBlockItem(i, item, $event)\">\n                            <mat-icon color=\"warn\">delete</mat-icon>\n                            <span>{{ t('visualBlock.removeAction') }}</span>\n                          </button>\n                        </mat-menu>\n                      </span>\n                    </div>\n                  }\n                }\n              }\n            } @else {\n              <div class=\"column-placeholder\">\n                <span>{{ t('row.column.empty') }}</span>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"row-empty-placeholder\">\n      <span>{{ t('row.empty') }}</span>\n      <div class=\"row-placeholder-actions\">\n        <button mat-stroked-button (click)=\"addColumn()\" [matTooltip]=\"t('row.menu.addColumn')\">\n          <mat-icon>add</mat-icon> {{ t('row.menu.addColumn') }}\n        </button>\n        <button mat-stroked-button color=\"warn\" (click)=\"removeRow()\" [matTooltip]=\"t('row.menu.removeRow')\">\n          <mat-icon>delete</mat-icon> {{ t('row.menu.removeRow') }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".row-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.bp-toggle{display:inline-flex;gap:4px;align-items:center}.bp-toggle__btn{min-width:34px;height:30px;line-height:30px;padding:0 8px;text-transform:uppercase}.bp-toggle__btn.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.gap-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.gap-chip{display:inline-flex;align-items:center;gap:2px;padding:0 4px;min-height:40px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-variant)}.gap-chip__input{width:42px;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 600 13px/18px system-ui);text-align:center;outline:none;-moz-appearance:textfield}.gap-chip__input::-webkit-outer-spin-button,.gap-chip__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-chip__suffix{color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.gap-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.chip-title{font:var(--mdc-typography-label-medium, 600 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;letter-spacing:.03em}.span-warning{display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-error);background:var(--md-sys-color-error-container);border:1px solid var(--md-sys-color-error);border-radius:6px;padding:4px 8px}.row-container{position:relative;display:flex;align-items:stretch;min-width:0;max-width:100%}.row{display:flex;flex-grow:1;min-width:0;position:relative;padding-right:0;border-radius:6px;transition:box-shadow .2s ease;gap:var(--pfx-grid-gap, 12px)}.row:focus{outline:none;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pfx-grid-gap, 16px)}.row.selected{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.row-label{position:absolute;left:-4px;top:-10px;transform:translateY(-100%);background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;padding:2px 6px;font-size:11px;opacity:0;transition:opacity .15s ease;pointer-events:none}.row:hover .row-label,.row.selected .row-label{opacity:1}.row-actions-meta{margin-left:auto}.column{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;border:1px dashed var(--md-sys-color-outline-variant);margin:0;background:var(--md-sys-color-surface-container);transition:background-color .2s ease,border-color .2s ease;border-radius:8px;overflow:hidden}.column-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--md-sys-color-surface-variant);border-bottom:1px solid var(--md-sys-color-outline-variant);min-height:36px}.column-content{flex:1;display:grid;align-content:start;gap:var(--px-row-field-gap, 6px);padding:8px}.column-status-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:12px;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.column-status-pill:hover,.column-status-pill.active{background:var(--md-sys-color-surface-variant);border-color:var(--md-sys-color-outline)}.status-bp{font-weight:700;text-transform:uppercase;font-size:11px;color:var(--md-sys-color-primary)}.status-divider{color:var(--md-sys-color-outline-variant)}.status-span,.status-offset{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--md-sys-color-on-surface)}.status-span mat-icon{font-size:14px;width:14px;height:14px}.status-hidden{color:var(--md-sys-color-error);display:flex;align-items:center}.status-hidden mat-icon{font-size:14px;width:14px;height:14px}.column-actions{display:flex;align-items:center;opacity:0;transition:opacity .2s ease}.column:hover .column-actions,.column.selected .column-actions,.column-actions:focus-within{opacity:1}.action-btn{width:24px;height:24px;line-height:24px;padding:0}.action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.popover-content{padding:12px;display:flex;flex-direction:column;gap:12px;min-width:200px}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:11px;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;font-weight:600}.control-row{display:flex;align-items:center;justify-content:space-between;background:var(--md-sys-color-surface-container-high);border-radius:8px;padding:2px}.value-display{font-weight:600;font-size:13px}.row.grid-12 .column{flex:unset}.column>div{margin:0}.column:focus{outline:none;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column:focus-visible{box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column.drop-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-variant)}.column.selected{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.column.cdk-drop-list-receiving{animation:columnHighlight .3s ease-in-out}@keyframes columnHighlight{0%{box-shadow:0 0 0 2px var(--md-sys-color-primary)}to{box-shadow:none}}.field-selected-highlight.selected .field-item,.selected>.field-item{border-color:var(--md-sys-color-primary)!important;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.field-layout-item{position:relative;display:block;min-width:0}:host ::ng-deep .field-layout-item.selected .field-item{border-color:var(--md-sys-color-primary)!important;box-shadow:0 0 0 2px var(--md-sys-color-primary)}.field-layout-item__edit{position:absolute;top:6px;right:6px;opacity:0;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease}.field-layout-item:hover .field-layout-item__edit,.field-layout-item.selected .field-layout-item__edit,.field-layout-item__edit:focus-visible{opacity:1;transform:translateY(0)}.visual-block-preview{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;padding:8px 10px;border:1px solid var(--md-sys-color-outline-variant);border-left:3px solid color-mix(in srgb,var(--md-sys-color-primary) 54%,var(--md-sys-color-outline-variant) 46%);border-radius:8px;background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface);font-size:13px;cursor:pointer}.visual-block-preview:hover{border-color:color-mix(in srgb,var(--md-sys-color-primary) 38%,var(--md-sys-color-outline-variant) 62%);border-left-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 10%,var(--md-sys-color-surface-container-low, var(--md-sys-color-surface)) 90%)}.visual-block-preview.selected{border-color:var(--md-sys-color-primary);border-left-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.visual-block-preview.cdk-drag-dragging{cursor:grabbing}.visual-block-preview.cdk-drag-preview{box-sizing:border-box;border-color:var(--md-sys-color-primary);border-left-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.visual-block-preview.cdk-drag-placeholder{position:relative;min-height:44px;border-color:transparent;border-left-color:transparent;background:transparent;box-shadow:none;opacity:1}.visual-block-preview.cdk-drag-placeholder>*{visibility:hidden}.visual-block-preview.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 8px auto 8px;height:2px;border-radius:999px;background:var(--md-sys-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary) 16%,transparent)}.visual-block-preview.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 4px);left:8px;width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-primary)}.visual-block-preview mat-icon{font-size:18px;width:18px;height:18px}.visual-block-preview__drag-handle{border:0;border-radius:50%;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--md-sys-color-on-surface-variant);cursor:grab;opacity:.72;flex:0 0 auto}.visual-block-preview__drag-handle:hover,.visual-block-preview__drag-handle:focus-visible{color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 52%,transparent);opacity:1;outline:none}.visual-block-preview__drag-handle:active{cursor:grabbing}.visual-block-preview.selected .visual-block-preview__drag-handle,.visual-block-preview.cdk-drag-dragging .visual-block-preview__drag-handle,.visual-block-preview.cdk-drag-preview .visual-block-preview__drag-handle{color:var(--md-sys-color-primary);opacity:1}.visual-block-preview__text{display:grid;gap:1px;min-width:0}.visual-block-preview__eyebrow{color:var(--md-sys-color-primary);font:var(--mdc-typography-label-small, 700 11px/14px system-ui);text-transform:uppercase}.visual-block-preview__label{overflow:hidden;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 500 13px/18px system-ui);text-overflow:ellipsis;white-space:nowrap}.visual-block-preview__actions{margin-left:auto;display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}.visual-block-preview__quick-action{color:var(--md-sys-color-on-surface-variant);opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s ease}.visual-block-preview:hover .visual-block-preview__quick-action,.visual-block-preview:focus-within .visual-block-preview__quick-action,.visual-block-preview.selected .visual-block-preview__quick-action{opacity:1;visibility:visible}.visual-block-preview__quick-action[disabled]{opacity:.28}@media(max-width:768px),(pointer:coarse){.visual-block-preview__quick-action{display:none}}.row-empty-placeholder{flex:1;border:1px dashed var(--md-sys-color-outline-variant);margin:0;padding:16px;text-align:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container)}.row-placeholder-actions{margin-top:8px;display:flex;gap:8px;justify-content:center}.hidden-overlay{position:absolute;inset:0;background:var(--md-sys-color-surface-container-low);border:1px dashed var(--md-sys-color-outline);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--md-sys-color-on-surface-variant);z-index:2;pointer-events:none}\n"] }]
         }], propDecorators: { row: [{
                 type: Input
             }], fieldMetadata: [{
@@ -21909,7 +21896,7 @@ class SectionConfiguratorComponent {
         this.applyStyleToAll.emit(patch);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SectionConfiguratorComponent, deps: [{ token: i2$1.MatDialog }, { token: SectionPresetRegistry }, { token: i7.SettingsPanelService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SectionConfiguratorComponent, isStandalone: true, selector: "praxis-section-configurator", inputs: { section: "section", sectionIndex: "sectionIndex", allSections: "allSections", fieldMetadata: "fieldMetadata", availableFields: "availableFields", selected: "selected", availableFieldsListId: "availableFieldsListId", columnDropListIds: "columnDropListIds", gapGlobal: "gapGlobal" }, outputs: { sectionChange: "sectionChange", applyStyleToAll: "applyStyleToAll", remove: "remove", select: "select", fieldDrop: "fieldDrop", addVisualBlock: "addVisualBlock", addApiField: "addApiField", addLocalField: "addLocalField", editField: "editField", editVisualBlock: "editVisualBlock", moveVisualBlock: "moveVisualBlock", moveVisualBlockToColumn: "moveVisualBlockToColumn", removeVisualBlock: "removeVisualBlock" }, ngImport: i0, template: "<mat-card\n  class=\"section-card\"\n  cdkDrag\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  [class.hovered]=\"isHovered\"\n  [class.selected]=\"isThisSectionSelected()\"\n  [class.collapsed]=\"isCollapsed\"\n  (click)=\"onSelectSection()\"\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.aria-label]=\"'Se\u00E7\u00E3o ' + (sectionIndex + 1)\"\n  [attr.aria-selected]=\"isThisSectionSelected()\"\n  >\n  <mat-card-header class=\"section-header\">\n    <mat-card-title class=\"title-wrapper\">\n      <div class=\"section-heading\">\n        @let headerPreview = getSectionHeaderPreview();\n        @let headerAvatarSize = getSectionHeaderAvatarSize();\n        @if (headerPreview.kind === 'icon') {\n          <mat-icon class=\"section-heading__icon\" aria-hidden=\"true\" [praxisIcon]=\"headerPreview.icon\"></mat-icon>\n        }\n        @if (headerPreview.kind === 'initials') {\n          <span class=\"section-heading__avatar section-heading__avatar--text\" [class.size-sm]=\"headerAvatarSize === 'sm'\"\n            [class.size-md]=\"headerAvatarSize === 'md'\" [class.size-lg]=\"headerAvatarSize === 'lg'\"\n            [matTooltip]=\"headerPreview.tooltip || ''\" [matTooltipDisabled]=\"!headerPreview.tooltip\">\n            {{ headerPreview.text }}\n          </span>\n        }\n        @if (headerPreview.kind === 'placeholder') {\n          <span class=\"section-heading__avatar section-heading__avatar--placeholder\" [class.size-sm]=\"headerAvatarSize === 'sm'\"\n            [class.size-md]=\"headerAvatarSize === 'md'\" [class.size-lg]=\"headerAvatarSize === 'lg'\"\n            [matTooltip]=\"headerPreview.tooltip || ''\" [matTooltipDisabled]=\"!headerPreview.tooltip\">\n            @if (headerPreview.icon) {\n              <mat-icon aria-hidden=\"true\" [praxisIcon]=\"headerPreview.icon\"></mat-icon>\n            }\n          </span>\n        }\n        <div class=\"section-heading__text\">\n          <span class=\"section-name\">{{ section.title || 'Sem t\u00EDtulo' }}</span>\n          @if (section.description) {\n            <span class=\"section-desc\">{{ section.description }}</span>\n          }\n        </div>\n      </div>\n      <button\n        mat-icon-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"section-editor-trigger\"\n        (click)=\"openAdvancedEditor($event)\"\n        matTooltip=\"Para editar o t\u00EDtulo, use o editor completo da se\u00E7\u00E3o\"\n        aria-label=\"Abrir editor da se\u00E7\u00E3o\"\n        >\n        <mat-icon>open_in_new</mat-icon>\n      </button>\n    </mat-card-title>\n    <div class=\"section-header-actions\">\n      <button\n        mat-icon-button\n        class=\"section-collapse-btn\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n        [attr.aria-label]=\"isCollapsed ? 'Expandir se\u00E7\u00E3o' : 'Colapsar se\u00E7\u00E3o'\"\n        [matTooltip]=\"isCollapsed ? 'Expandir se\u00E7\u00E3o' : 'Colapsar se\u00E7\u00E3o'\"\n        >\n        <mat-icon>{{ isCollapsed ? 'unfold_more' : 'unfold_less' }}</mat-icon>\n      </button>\n      <button\n        mat-icon-button\n        class=\"section-menu-btn\"\n        [matMenuTriggerFor]=\"sectionMenu\"\n        aria-label=\"Mais a\u00E7\u00F5es da se\u00E7\u00E3o\"\n        matTooltip=\"Mais a\u00E7\u00F5es\"\n        >\n        <mat-icon [praxisIcon]=\"'more_vert'\"></mat-icon>\n      </button>\n    </div>\n    <mat-menu #sectionMenu=\"matMenu\">\n      <button mat-menu-item (click)=\"openSectionPresets()\">\n        <mat-icon [praxisIcon]=\"'view_quilt'\"></mat-icon>\n        <span>Presets de se\u00E7\u00E3o\u2026</span>\n      </button>\n      <button mat-menu-item (click)=\"applyCurrentStyleToAll()\">\n        <mat-icon [praxisIcon]=\"'format_paint'\"></mat-icon>\n        <span>Aplicar estilo desta se\u00E7\u00E3o a todas</span>\n      </button>\n      <mat-divider></mat-divider>\n      @if (section.description == null) {\n        <button mat-menu-item (click)=\"section.description = ''; onSectionUpdated()\">\n          <mat-icon [praxisIcon]=\"'note_add'\"></mat-icon>\n          <span>Adicionar descri\u00E7\u00E3o</span>\n        </button>\n      }\n      @if (section.description != null) {\n        <button mat-menu-item (click)=\"section.description = undefined; onSectionUpdated()\">\n          <mat-icon [praxisIcon]=\"'backspace'\"></mat-icon>\n          <span>Remover descri\u00E7\u00E3o</span>\n        </button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"onRemoveSection()\">\n        <mat-icon [praxisIcon]=\"'delete'\"></mat-icon>\n        <span>Remover se\u00E7\u00E3o</span>\n      </button>\n    </mat-menu>\n  </mat-card-header>\n  <mat-card-content [attr.aria-hidden]=\"isCollapsed\">\n    @if (isThisSectionSelected()) {\n      <div class=\"section-breadcrumbs\" (click)=\"$event.stopPropagation()\">\n        <button\n          type=\"button\"\n          class=\"crumb as-button\"\n          data-crumb=\"layout\"\n          [attr.aria-label]=\"'Voltar ao Layout'\"\n          disabled\n          >\n          Layout\n        </button>\n        <span class=\"sep\">\u203A</span>\n        <button\n          type=\"button\"\n          class=\"crumb as-button crumb-section\"\n          data-crumb=\"section\"\n          (click)=\"onSelectSectionFromBreadcrumb($event)\"\n          [attr.aria-label]=\"'Selecionar Se\u00E7\u00E3o ' + (sectionIndex + 1)\"\n          >\n          Se\u00E7\u00E3o {{ sectionIndex + 1 }}\n        </button>\n        @if (selected?.rowIndex != null) {\n          <span class=\"sep\">\u203A</span>\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-row\"\n            data-crumb=\"row\"\n            (click)=\"onSelectRowFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Selecionar Linha ' + (selected!.rowIndex! + 1)\"\n            >\n            Linha {{ selected!.rowIndex! + 1 }}\n          </button>\n        }\n        @if (selected?.columnIndex != null) {\n          <span class=\"sep\">\u203A</span>\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-column\"\n            data-crumb=\"column\"\n            (click)=\"onSelectColumnFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Selecionar Coluna ' + (selected!.columnIndex! + 1)\"\n            >\n            Coluna {{ selected!.columnIndex! + 1 }}\n          </button>\n        }\n        @if (selected?.fieldName) {\n          <span class=\"sep\">\u203A</span>\n          <span class=\"crumb active\">{{ selected!.fieldName }}</span>\n        }\n        @if (selected) {\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-clear\"\n            data-crumb=\"clear\"\n            (click)=\"onClearSelectionFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Limpar sele\u00E7\u00E3o'\"\n            >\n            Limpar\n          </button>\n        }\n      </div>\n    } @else {\n      <h5>Linhas</h5>\n    }\n    <div\n      class=\"row-list\"\n      cdkDropList\n      [cdkDropListData]=\"section.rows\"\n      (cdkDropListDropped)=\"dropRow($event)\"\n      >\n      @for (row of section.rows; track row; let i = $index) {\n        <praxis-row-configurator\n          class=\"row-item\"\n          [row]=\"row\"\n          [fieldMetadata]=\"fieldMetadata\"\n          [availableFields]=\"availableFields\"\n          [sectionIndex]=\"sectionIndex\"\n          [rowIndex]=\"i\"\n          [isLastRow]=\"i === section.rows.length - 1\"\n          [selected]=\"selected\"\n          [availableFieldsListId]=\"availableFieldsListId\"\n          [connectedDropListIds]=\"columnDropListIds\"\n          [gapGlobal]=\"gapGlobal\"\n          (rowChange)=\"onRowUpdated(i, $event)\"\n          (applyRowGapAll)=\"onApplyRowGapAll($event)\"\n          (remove)=\"removeRow(i)\"\n          (select)=\"select.emit($event)\"\n          (fieldDrop)=\"onFieldDrop($event, i)\"\n          (addVisualBlock)=\"onAddVisualBlock($event)\"\n          (addApiField)=\"onAddApiField($event)\"\n          (addLocalField)=\"onAddLocalField($event)\"\n          (editField)=\"onEditField($event)\"\n          (editVisualBlock)=\"onEditVisualBlock($event)\"\n          (moveVisualBlock)=\"onMoveVisualBlock($event)\"\n          (moveVisualBlockToColumn)=\"onMoveVisualBlockToColumn($event)\"\n          (removeVisualBlock)=\"onRemoveVisualBlock($event)\"\n          cdkDrag\n        ></praxis-row-configurator>\n      }\n    </div>\n    <div class=\"section-actions\" aria-label=\"A\u00E7\u00F5es da se\u00E7\u00E3o\">\n      <button\n        class=\"fab-add-row\"\n        mat-fab\n        color=\"primary\"\n        (click)=\"addRow()\"\n        matTooltip=\"Adicionar linha\"\n        aria-label=\"Adicionar linha\"\n        >\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </mat-card-content>\n</mat-card>\n", styles: ["@charset \"UTF-8\";.section-card{background:var(--md-sys-color-surface, var(--sicoob-bg-elev-1));margin-bottom:16px;transition:border-color .2s ease;border:1px solid transparent;box-sizing:border-box;max-width:100%;min-width:0}.section-card.hovered{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-card.selected{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));box-shadow:0 0 0 2px var(--md-sys-color-primary)}.section-card.cdk-drag-dragging{cursor:grabbing}.section-card.cdk-drag-preview{box-sizing:border-box;border-color:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.section-card.cdk-drag-placeholder{position:relative;min-height:64px;border-color:transparent;background:transparent;box-shadow:none;opacity:1}.section-card.cdk-drag-placeholder>*{visibility:hidden}.section-card.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 12px auto 12px;height:2px;border-radius:999px;background:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary, var(--sicoob-primary-default)) 16%,transparent)}.section-card.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 5px);left:12px;width:10px;height:10px;border-radius:50%;background:var(--md-sys-color-primary, var(--sicoob-primary-default))}.section-card:focus-visible{outline:2px solid var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));outline-offset:2px}.section-card .mat-mdc-card-content{padding-bottom:var(--px-editor-section-gap, 16px)}.section-breadcrumbs{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin:4px 0 8px;display:flex;align-items:center;gap:6px}.section-breadcrumbs .as-button{background:transparent;border:none;padding:0 2px;color:inherit;font:inherit;cursor:pointer;border-radius:4px}.section-breadcrumbs .as-button:hover{color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-breadcrumbs .as-button:focus-visible{outline:2px solid var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));outline-offset:2px}.section-breadcrumbs .crumb-clear{margin-left:6px;opacity:.85}.section-breadcrumbs .crumb.active{color:var(--md-sys-color-on-surface);font-weight:600}.section-breadcrumbs .sep{opacity:.6}.section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;min-width:0}.title-wrapper{display:flex;align-items:center;gap:8px;width:100%;min-width:0;flex:1 1 auto}.section-heading{display:flex;align-items:center;gap:10px;min-width:0}.section-heading__icon{color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-heading__avatar{--_pfx-layout-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-layout-section-avatar-size);height:var(--_pfx-layout-section-avatar-size);border-radius:999px;flex:0 0 var(--_pfx-layout-section-avatar-size);overflow:hidden}.section-heading__avatar.size-sm{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-sm, 24px)}.section-heading__avatar.size-md{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px))}.section-heading__avatar.size-lg{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-lg, 40px)}.section-heading__avatar--text,.section-heading__avatar--placeholder{background:color-mix(in srgb,var(--pfx-editorial-form-accent, var(--md-sys-color-primary, var(--sicoob-primary-default))) 14%,var(--pfx-form-section-surface-flat, var(--md-sys-color-surface, var(--sicoob-bg-elev-1))));color:color-mix(in srgb,var(--pfx-editorial-form-accent, var(--md-sys-color-primary, var(--sicoob-primary-default))) 82%,var(--pfx-form-label-strong, var(--md-sys-color-on-surface, var(--sicoob-text-default))) 18%);font-size:calc(var(--_pfx-layout-section-avatar-size) * .41);font-weight:800;letter-spacing:.04em;text-transform:uppercase}.section-heading__avatar--placeholder mat-icon{font-size:calc(var(--_pfx-layout-section-avatar-size) * .5625);width:calc(var(--_pfx-layout-section-avatar-size) * .5625);height:calc(var(--_pfx-layout-section-avatar-size) * .5625);line-height:calc(var(--_pfx-layout-section-avatar-size) * .5625)}.section-heading__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.section-heading .section-name{font-weight:600;color:var(--md-sys-color-on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-heading .section-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-editor-trigger{margin-left:auto}.section-header-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.section-header-actions .mat-mdc-icon-button{width:36px;height:36px;padding:6px}.add-row-button{margin-top:8px}.row-item{animation:fadeIn .3s ease}.row-item.cdk-drag-dragging{cursor:grabbing}.row-item.cdk-drag-preview{box-sizing:border-box;border-radius:8px;background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.row-item.cdk-drag-placeholder{position:relative;display:block;min-height:56px;opacity:1}.row-item.cdk-drag-placeholder>*{visibility:hidden}.row-item.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 8px auto 8px;height:2px;border-radius:999px;background:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary, var(--sicoob-primary-default)) 16%,transparent)}.row-item.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 4px);left:8px;width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-primary, var(--sicoob-primary-default))}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.section-card:hover{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-card.collapsed .mat-mdc-card-content{display:none}:host ::ng-deep .section-card .mat-mdc-card-header{padding:8px 12px}:host ::ng-deep .section-card .mat-mdc-card-title{margin:0}:host ::ng-deep .section-card .mat-mdc-card-content{padding:0 12px 12px}.section-actions{position:relative;margin-top:12px;padding-top:16px;border-top:1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium)));min-height:28px}.row-list{border-top:1px solid var(--px-editor-separator-color, var(--md-sys-color-outline-variant));padding-top:12px;margin-top:8px;min-width:0}.fab-add-row{position:absolute;top:-15px;left:50%;transform:translate(-50%,calc(-50% - var(--pfx-divider-w, 1px)));z-index:2;--pfx-fab-size: var(--pfx-fab-size-row, 32px);--pfx-fab-icon: var(--pfx-fab-icon-row, 18px);width:var(--pfx-fab-size);height:var(--pfx-fab-size);border-radius:50%}.fab-add-row.mat-mdc-fab{width:var(--pfx-fab-size);height:var(--pfx-fab-size);padding:0}.fab-add-row .mat-mdc-button-touch-target,.fab-add-row .mat-mdc-button-persistent-ripple,.fab-add-row .mat-mdc-button-ripple{width:var(--pfx-fab-size);height:var(--pfx-fab-size)}.fab-add-row mat-icon{font-size:var(--pfx-fab-icon);width:var(--pfx-fab-icon);height:var(--pfx-fab-icon)}@media(max-width:700px){.section-header{position:relative;align-items:flex-start;display:block;min-height:88px;padding-right:12px}.title-wrapper{align-items:flex-start;padding-right:132px;width:auto}.section-heading{align-items:flex-start;gap:12px}.section-heading__icon{margin-top:4px}.section-heading .section-name{font-size:20px;line-height:26px}.section-header-actions{position:absolute;top:12px;right:12px;margin-left:0}.section-editor-trigger{position:absolute;top:12px;right:88px;margin-left:0}.section-editor-trigger,.section-header-actions .mat-mdc-icon-button{width:36px;height:36px;padding:6px}.section-heading .section-name,.section-heading .section-desc{overflow:visible;text-overflow:clip;white-space:normal}}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: RowConfiguratorComponent, selector: "praxis-row-configurator", inputs: ["row", "fieldMetadata", "availableFields", "sectionIndex", "rowIndex", "isLastRow", "selected", "availableFieldsListId", "connectedDropListIds", "gapGlobal"], outputs: ["rowChange", "remove", "applyRowGapAll", "fieldDrop", "addVisualBlock", "addApiField", "addLocalField", "editField", "editVisualBlock", "moveVisualBlock", "moveVisualBlockToColumn", "removeVisualBlock", "select"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: MatCardModule }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SectionConfiguratorComponent, isStandalone: true, selector: "praxis-section-configurator", inputs: { section: "section", sectionIndex: "sectionIndex", allSections: "allSections", fieldMetadata: "fieldMetadata", availableFields: "availableFields", selected: "selected", availableFieldsListId: "availableFieldsListId", columnDropListIds: "columnDropListIds", gapGlobal: "gapGlobal" }, outputs: { sectionChange: "sectionChange", applyStyleToAll: "applyStyleToAll", remove: "remove", select: "select", fieldDrop: "fieldDrop", addVisualBlock: "addVisualBlock", addApiField: "addApiField", addLocalField: "addLocalField", editField: "editField", editVisualBlock: "editVisualBlock", moveVisualBlock: "moveVisualBlock", moveVisualBlockToColumn: "moveVisualBlockToColumn", removeVisualBlock: "removeVisualBlock" }, ngImport: i0, template: "<mat-card\n  class=\"section-card\"\n  cdkDrag\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  [class.hovered]=\"isHovered\"\n  [class.selected]=\"isThisSectionSelected()\"\n  [class.collapsed]=\"isCollapsed\"\n  (click)=\"onSelectSection()\"\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.aria-label]=\"'Se\u00E7\u00E3o ' + (sectionIndex + 1)\"\n  [attr.aria-selected]=\"isThisSectionSelected()\"\n  >\n  <mat-card-header class=\"section-header\">\n    <mat-card-title class=\"title-wrapper\">\n      <div class=\"section-heading\">\n        @let headerPreview = getSectionHeaderPreview();\n        @let headerAvatarSize = getSectionHeaderAvatarSize();\n        @if (headerPreview.kind === 'icon') {\n          <mat-icon class=\"section-heading__icon\" aria-hidden=\"true\" [praxisIcon]=\"headerPreview.icon\"></mat-icon>\n        }\n        @if (headerPreview.kind === 'initials') {\n          <span class=\"section-heading__avatar section-heading__avatar--text\" [class.size-sm]=\"headerAvatarSize === 'sm'\"\n            [class.size-md]=\"headerAvatarSize === 'md'\" [class.size-lg]=\"headerAvatarSize === 'lg'\"\n            [matTooltip]=\"headerPreview.tooltip || ''\" [matTooltipDisabled]=\"!headerPreview.tooltip\">\n            {{ headerPreview.text }}\n          </span>\n        }\n        @if (headerPreview.kind === 'placeholder') {\n          <span class=\"section-heading__avatar section-heading__avatar--placeholder\" [class.size-sm]=\"headerAvatarSize === 'sm'\"\n            [class.size-md]=\"headerAvatarSize === 'md'\" [class.size-lg]=\"headerAvatarSize === 'lg'\"\n            [matTooltip]=\"headerPreview.tooltip || ''\" [matTooltipDisabled]=\"!headerPreview.tooltip\">\n            @if (headerPreview.icon) {\n              <mat-icon aria-hidden=\"true\" [praxisIcon]=\"headerPreview.icon\"></mat-icon>\n            }\n          </span>\n        }\n        <div class=\"section-heading__text\">\n          <span class=\"section-name\">{{ section.title || 'Sem t\u00EDtulo' }}</span>\n          @if (section.description) {\n            <span class=\"section-desc\">{{ section.description }}</span>\n          }\n        </div>\n      </div>\n      <button\n        praxisIconButton=\"open_in_new\"\n        size=\"dense\"\n        type=\"button\"\n        class=\"section-editor-trigger primary-action\"\n        (click)=\"openAdvancedEditor($event)\"\n        matTooltip=\"Para editar o t\u00EDtulo, use o editor completo da se\u00E7\u00E3o\"\n        aria-label=\"Abrir editor da se\u00E7\u00E3o\"\n        >\n      </button>\n    </mat-card-title>\n    <div class=\"section-header-actions\">\n      <button\n        [praxisIconButton]=\"isCollapsed ? 'unfold_more' : 'unfold_less'\"\n        size=\"dense\"\n        class=\"section-collapse-btn\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n        [attr.aria-label]=\"isCollapsed ? 'Expandir se\u00E7\u00E3o' : 'Colapsar se\u00E7\u00E3o'\"\n        [matTooltip]=\"isCollapsed ? 'Expandir se\u00E7\u00E3o' : 'Colapsar se\u00E7\u00E3o'\"\n        >\n      </button>\n      <button\n        praxisIconButton=\"more_vert\"\n        size=\"dense\"\n        class=\"section-menu-btn\"\n        [matMenuTriggerFor]=\"sectionMenu\"\n        aria-label=\"Mais a\u00E7\u00F5es da se\u00E7\u00E3o\"\n        matTooltip=\"Mais a\u00E7\u00F5es\"\n        >\n      </button>\n    </div>\n    <mat-menu #sectionMenu=\"matMenu\">\n      <button mat-menu-item (click)=\"openSectionPresets()\">\n        <mat-icon [praxisIcon]=\"'view_quilt'\"></mat-icon>\n        <span>Presets de se\u00E7\u00E3o\u2026</span>\n      </button>\n      <button mat-menu-item (click)=\"applyCurrentStyleToAll()\">\n        <mat-icon [praxisIcon]=\"'format_paint'\"></mat-icon>\n        <span>Aplicar estilo desta se\u00E7\u00E3o a todas</span>\n      </button>\n      <mat-divider></mat-divider>\n      @if (section.description == null) {\n        <button mat-menu-item (click)=\"section.description = ''; onSectionUpdated()\">\n          <mat-icon [praxisIcon]=\"'note_add'\"></mat-icon>\n          <span>Adicionar descri\u00E7\u00E3o</span>\n        </button>\n      }\n      @if (section.description != null) {\n        <button mat-menu-item (click)=\"section.description = undefined; onSectionUpdated()\">\n          <mat-icon [praxisIcon]=\"'backspace'\"></mat-icon>\n          <span>Remover descri\u00E7\u00E3o</span>\n        </button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"onRemoveSection()\">\n        <mat-icon [praxisIcon]=\"'delete'\"></mat-icon>\n        <span>Remover se\u00E7\u00E3o</span>\n      </button>\n    </mat-menu>\n  </mat-card-header>\n  <mat-card-content [attr.aria-hidden]=\"isCollapsed\">\n    @if (isThisSectionSelected()) {\n      <div class=\"section-breadcrumbs\" (click)=\"$event.stopPropagation()\">\n        <button\n          type=\"button\"\n          class=\"crumb as-button\"\n          data-crumb=\"layout\"\n          [attr.aria-label]=\"'Voltar ao Layout'\"\n          disabled\n          >\n          Layout\n        </button>\n        <span class=\"sep\">\u203A</span>\n        <button\n          type=\"button\"\n          class=\"crumb as-button crumb-section\"\n          data-crumb=\"section\"\n          (click)=\"onSelectSectionFromBreadcrumb($event)\"\n          [attr.aria-label]=\"'Selecionar Se\u00E7\u00E3o ' + (sectionIndex + 1)\"\n          >\n          Se\u00E7\u00E3o {{ sectionIndex + 1 }}\n        </button>\n        @if (selected?.rowIndex != null) {\n          <span class=\"sep\">\u203A</span>\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-row\"\n            data-crumb=\"row\"\n            (click)=\"onSelectRowFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Selecionar Linha ' + (selected!.rowIndex! + 1)\"\n            >\n            Linha {{ selected!.rowIndex! + 1 }}\n          </button>\n        }\n        @if (selected?.columnIndex != null) {\n          <span class=\"sep\">\u203A</span>\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-column\"\n            data-crumb=\"column\"\n            (click)=\"onSelectColumnFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Selecionar Coluna ' + (selected!.columnIndex! + 1)\"\n            >\n            Coluna {{ selected!.columnIndex! + 1 }}\n          </button>\n        }\n        @if (selected?.fieldName) {\n          <span class=\"sep\">\u203A</span>\n          <span class=\"crumb active\">{{ selected!.fieldName }}</span>\n        }\n        @if (selected) {\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-clear\"\n            data-crumb=\"clear\"\n            (click)=\"onClearSelectionFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Limpar sele\u00E7\u00E3o'\"\n            >\n            Limpar\n          </button>\n        }\n      </div>\n    } @else {\n      <h5>Linhas</h5>\n    }\n    <div\n      class=\"row-list\"\n      cdkDropList\n      [cdkDropListData]=\"section.rows\"\n      (cdkDropListDropped)=\"dropRow($event)\"\n      >\n      @for (row of section.rows; track row; let i = $index) {\n        <praxis-row-configurator\n          class=\"row-item\"\n          [row]=\"row\"\n          [fieldMetadata]=\"fieldMetadata\"\n          [availableFields]=\"availableFields\"\n          [sectionIndex]=\"sectionIndex\"\n          [rowIndex]=\"i\"\n          [isLastRow]=\"i === section.rows.length - 1\"\n          [selected]=\"selected\"\n          [availableFieldsListId]=\"availableFieldsListId\"\n          [connectedDropListIds]=\"columnDropListIds\"\n          [gapGlobal]=\"gapGlobal\"\n          (rowChange)=\"onRowUpdated(i, $event)\"\n          (applyRowGapAll)=\"onApplyRowGapAll($event)\"\n          (remove)=\"removeRow(i)\"\n          (select)=\"select.emit($event)\"\n          (fieldDrop)=\"onFieldDrop($event, i)\"\n          (addVisualBlock)=\"onAddVisualBlock($event)\"\n          (addApiField)=\"onAddApiField($event)\"\n          (addLocalField)=\"onAddLocalField($event)\"\n          (editField)=\"onEditField($event)\"\n          (editVisualBlock)=\"onEditVisualBlock($event)\"\n          (moveVisualBlock)=\"onMoveVisualBlock($event)\"\n          (moveVisualBlockToColumn)=\"onMoveVisualBlockToColumn($event)\"\n          (removeVisualBlock)=\"onRemoveVisualBlock($event)\"\n          cdkDrag\n        ></praxis-row-configurator>\n      }\n    </div>\n    <div class=\"section-actions\" aria-label=\"A\u00E7\u00F5es da se\u00E7\u00E3o\">\n      <button\n        class=\"fab-add-row\"\n        mat-fab\n        color=\"primary\"\n        (click)=\"addRow()\"\n        matTooltip=\"Adicionar linha\"\n        aria-label=\"Adicionar linha\"\n        >\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </mat-card-content>\n</mat-card>\n", styles: ["@charset \"UTF-8\";.section-card{background:var(--md-sys-color-surface, var(--sicoob-bg-elev-1));margin-bottom:16px;transition:border-color .2s ease;border:1px solid transparent;box-sizing:border-box;max-width:100%;min-width:0}.section-card.hovered{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-card.selected{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));box-shadow:0 0 0 2px var(--md-sys-color-primary)}.section-card.cdk-drag-dragging{cursor:grabbing}.section-card.cdk-drag-preview{box-sizing:border-box;border-color:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.section-card.cdk-drag-placeholder{position:relative;min-height:64px;border-color:transparent;background:transparent;box-shadow:none;opacity:1}.section-card.cdk-drag-placeholder>*{visibility:hidden}.section-card.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 12px auto 12px;height:2px;border-radius:999px;background:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary, var(--sicoob-primary-default)) 16%,transparent)}.section-card.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 5px);left:12px;width:10px;height:10px;border-radius:50%;background:var(--md-sys-color-primary, var(--sicoob-primary-default))}.section-card:focus-visible{outline:2px solid var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));outline-offset:2px}.section-card .mat-mdc-card-content{padding-bottom:var(--px-editor-section-gap, 16px)}.section-breadcrumbs{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin:4px 0 8px;display:flex;align-items:center;gap:6px}.section-breadcrumbs .as-button{background:transparent;border:none;padding:0 2px;color:inherit;font:inherit;cursor:pointer;border-radius:4px}.section-breadcrumbs .as-button:hover{color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-breadcrumbs .as-button:focus-visible{outline:2px solid var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));outline-offset:2px}.section-breadcrumbs .crumb-clear{margin-left:6px;opacity:.85}.section-breadcrumbs .crumb.active{color:var(--md-sys-color-on-surface);font-weight:600}.section-breadcrumbs .sep{opacity:.6}.section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;min-width:0}.title-wrapper{display:flex;align-items:center;gap:8px;width:100%;min-width:0;flex:1 1 auto}.section-heading{display:flex;align-items:center;gap:10px;min-width:0}.section-heading__icon{color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-heading__avatar{--_pfx-layout-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-layout-section-avatar-size);height:var(--_pfx-layout-section-avatar-size);border-radius:999px;flex:0 0 var(--_pfx-layout-section-avatar-size);overflow:hidden}.section-heading__avatar.size-sm{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-sm, 24px)}.section-heading__avatar.size-md{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px))}.section-heading__avatar.size-lg{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-lg, 40px)}.section-heading__avatar--text,.section-heading__avatar--placeholder{background:color-mix(in srgb,var(--pfx-editorial-form-accent, var(--md-sys-color-primary, var(--sicoob-primary-default))) 14%,var(--pfx-form-section-surface-flat, var(--md-sys-color-surface, var(--sicoob-bg-elev-1))));color:color-mix(in srgb,var(--pfx-editorial-form-accent, var(--md-sys-color-primary, var(--sicoob-primary-default))) 82%,var(--pfx-form-label-strong, var(--md-sys-color-on-surface, var(--sicoob-text-default))) 18%);font-size:calc(var(--_pfx-layout-section-avatar-size) * .41);font-weight:800;letter-spacing:.04em;text-transform:uppercase}.section-heading__avatar--placeholder mat-icon{font-size:calc(var(--_pfx-layout-section-avatar-size) * .5625);width:calc(var(--_pfx-layout-section-avatar-size) * .5625);height:calc(var(--_pfx-layout-section-avatar-size) * .5625);line-height:calc(var(--_pfx-layout-section-avatar-size) * .5625)}.section-heading__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.section-heading .section-name{font-weight:600;color:var(--md-sys-color-on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-heading .section-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-editor-trigger{margin-left:auto}.section-editor-trigger.primary-action{color:var(--md-sys-color-primary)}.section-header-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.add-row-button{margin-top:8px}.row-item{animation:fadeIn .3s ease}.row-item.cdk-drag-dragging{cursor:grabbing}.row-item.cdk-drag-preview{box-sizing:border-box;border-radius:8px;background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.row-item.cdk-drag-placeholder{position:relative;display:block;min-height:56px;opacity:1}.row-item.cdk-drag-placeholder>*{visibility:hidden}.row-item.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 8px auto 8px;height:2px;border-radius:999px;background:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary, var(--sicoob-primary-default)) 16%,transparent)}.row-item.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 4px);left:8px;width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-primary, var(--sicoob-primary-default))}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.section-card:hover{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-card.collapsed .mat-mdc-card-content{display:none}:host ::ng-deep .section-card .mat-mdc-card-header{padding:8px 12px}:host ::ng-deep .section-card .mat-mdc-card-title{margin:0}:host ::ng-deep .section-card .mat-mdc-card-content{padding:0 12px 12px}.section-actions{position:relative;margin-top:12px;padding-top:16px;border-top:1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium)));min-height:28px}.row-list{border-top:1px solid var(--px-editor-separator-color, var(--md-sys-color-outline-variant));padding-top:12px;margin-top:8px;min-width:0}.fab-add-row{position:absolute;top:-15px;left:50%;transform:translate(-50%,calc(-50% - var(--pfx-divider-w, 1px)));z-index:2;--pfx-fab-size: var(--pfx-fab-size-row, 32px);--pfx-fab-icon: var(--pfx-fab-icon-row, 18px);width:var(--pfx-fab-size);height:var(--pfx-fab-size);border-radius:50%}.fab-add-row.mat-mdc-fab{width:var(--pfx-fab-size);height:var(--pfx-fab-size);padding:0}.fab-add-row .mat-mdc-button-touch-target,.fab-add-row .mat-mdc-button-persistent-ripple,.fab-add-row .mat-mdc-button-ripple{width:var(--pfx-fab-size);height:var(--pfx-fab-size)}.fab-add-row mat-icon{font-size:var(--pfx-fab-icon);width:var(--pfx-fab-icon);height:var(--pfx-fab-icon)}@media(max-width:700px){.section-header{position:relative;align-items:flex-start;display:block;min-height:88px;padding-right:12px}.title-wrapper{align-items:flex-start;padding-right:132px;width:auto}.section-heading{align-items:flex-start;gap:12px}.section-heading__icon{margin-top:4px}.section-heading .section-name{font-size:20px;line-height:26px}.section-header-actions{position:absolute;top:12px;right:12px;margin-left:0}.section-editor-trigger{position:absolute;top:12px;right:88px;margin-left:0}.section-heading .section-name,.section-heading .section-desc{overflow:visible;text-overflow:clip;white-space:normal}}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: RowConfiguratorComponent, selector: "praxis-row-configurator", inputs: ["row", "fieldMetadata", "availableFields", "sectionIndex", "rowIndex", "isLastRow", "selected", "availableFieldsListId", "connectedDropListIds", "gapGlobal"], outputs: ["rowChange", "remove", "applyRowGapAll", "fieldDrop", "addVisualBlock", "addApiField", "addLocalField", "editField", "editVisualBlock", "moveVisualBlock", "moveVisualBlockToColumn", "removeVisualBlock", "select"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SectionConfiguratorComponent, decorators: [{
             type: Component,
@@ -21918,13 +21905,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         RowConfiguratorComponent,
                         MatButtonModule,
                         MatIconModule,
+                        PraxisIconButtonComponent,
                         PraxisIconDirective,
                         MatCardModule,
                         MatTooltipModule,
                         MatDialogModule,
                         MatMenuModule,
                         MatDividerModule
-                    ], template: "<mat-card\n  class=\"section-card\"\n  cdkDrag\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  [class.hovered]=\"isHovered\"\n  [class.selected]=\"isThisSectionSelected()\"\n  [class.collapsed]=\"isCollapsed\"\n  (click)=\"onSelectSection()\"\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.aria-label]=\"'Se\u00E7\u00E3o ' + (sectionIndex + 1)\"\n  [attr.aria-selected]=\"isThisSectionSelected()\"\n  >\n  <mat-card-header class=\"section-header\">\n    <mat-card-title class=\"title-wrapper\">\n      <div class=\"section-heading\">\n        @let headerPreview = getSectionHeaderPreview();\n        @let headerAvatarSize = getSectionHeaderAvatarSize();\n        @if (headerPreview.kind === 'icon') {\n          <mat-icon class=\"section-heading__icon\" aria-hidden=\"true\" [praxisIcon]=\"headerPreview.icon\"></mat-icon>\n        }\n        @if (headerPreview.kind === 'initials') {\n          <span class=\"section-heading__avatar section-heading__avatar--text\" [class.size-sm]=\"headerAvatarSize === 'sm'\"\n            [class.size-md]=\"headerAvatarSize === 'md'\" [class.size-lg]=\"headerAvatarSize === 'lg'\"\n            [matTooltip]=\"headerPreview.tooltip || ''\" [matTooltipDisabled]=\"!headerPreview.tooltip\">\n            {{ headerPreview.text }}\n          </span>\n        }\n        @if (headerPreview.kind === 'placeholder') {\n          <span class=\"section-heading__avatar section-heading__avatar--placeholder\" [class.size-sm]=\"headerAvatarSize === 'sm'\"\n            [class.size-md]=\"headerAvatarSize === 'md'\" [class.size-lg]=\"headerAvatarSize === 'lg'\"\n            [matTooltip]=\"headerPreview.tooltip || ''\" [matTooltipDisabled]=\"!headerPreview.tooltip\">\n            @if (headerPreview.icon) {\n              <mat-icon aria-hidden=\"true\" [praxisIcon]=\"headerPreview.icon\"></mat-icon>\n            }\n          </span>\n        }\n        <div class=\"section-heading__text\">\n          <span class=\"section-name\">{{ section.title || 'Sem t\u00EDtulo' }}</span>\n          @if (section.description) {\n            <span class=\"section-desc\">{{ section.description }}</span>\n          }\n        </div>\n      </div>\n      <button\n        mat-icon-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"section-editor-trigger\"\n        (click)=\"openAdvancedEditor($event)\"\n        matTooltip=\"Para editar o t\u00EDtulo, use o editor completo da se\u00E7\u00E3o\"\n        aria-label=\"Abrir editor da se\u00E7\u00E3o\"\n        >\n        <mat-icon>open_in_new</mat-icon>\n      </button>\n    </mat-card-title>\n    <div class=\"section-header-actions\">\n      <button\n        mat-icon-button\n        class=\"section-collapse-btn\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n        [attr.aria-label]=\"isCollapsed ? 'Expandir se\u00E7\u00E3o' : 'Colapsar se\u00E7\u00E3o'\"\n        [matTooltip]=\"isCollapsed ? 'Expandir se\u00E7\u00E3o' : 'Colapsar se\u00E7\u00E3o'\"\n        >\n        <mat-icon>{{ isCollapsed ? 'unfold_more' : 'unfold_less' }}</mat-icon>\n      </button>\n      <button\n        mat-icon-button\n        class=\"section-menu-btn\"\n        [matMenuTriggerFor]=\"sectionMenu\"\n        aria-label=\"Mais a\u00E7\u00F5es da se\u00E7\u00E3o\"\n        matTooltip=\"Mais a\u00E7\u00F5es\"\n        >\n        <mat-icon [praxisIcon]=\"'more_vert'\"></mat-icon>\n      </button>\n    </div>\n    <mat-menu #sectionMenu=\"matMenu\">\n      <button mat-menu-item (click)=\"openSectionPresets()\">\n        <mat-icon [praxisIcon]=\"'view_quilt'\"></mat-icon>\n        <span>Presets de se\u00E7\u00E3o\u2026</span>\n      </button>\n      <button mat-menu-item (click)=\"applyCurrentStyleToAll()\">\n        <mat-icon [praxisIcon]=\"'format_paint'\"></mat-icon>\n        <span>Aplicar estilo desta se\u00E7\u00E3o a todas</span>\n      </button>\n      <mat-divider></mat-divider>\n      @if (section.description == null) {\n        <button mat-menu-item (click)=\"section.description = ''; onSectionUpdated()\">\n          <mat-icon [praxisIcon]=\"'note_add'\"></mat-icon>\n          <span>Adicionar descri\u00E7\u00E3o</span>\n        </button>\n      }\n      @if (section.description != null) {\n        <button mat-menu-item (click)=\"section.description = undefined; onSectionUpdated()\">\n          <mat-icon [praxisIcon]=\"'backspace'\"></mat-icon>\n          <span>Remover descri\u00E7\u00E3o</span>\n        </button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"onRemoveSection()\">\n        <mat-icon [praxisIcon]=\"'delete'\"></mat-icon>\n        <span>Remover se\u00E7\u00E3o</span>\n      </button>\n    </mat-menu>\n  </mat-card-header>\n  <mat-card-content [attr.aria-hidden]=\"isCollapsed\">\n    @if (isThisSectionSelected()) {\n      <div class=\"section-breadcrumbs\" (click)=\"$event.stopPropagation()\">\n        <button\n          type=\"button\"\n          class=\"crumb as-button\"\n          data-crumb=\"layout\"\n          [attr.aria-label]=\"'Voltar ao Layout'\"\n          disabled\n          >\n          Layout\n        </button>\n        <span class=\"sep\">\u203A</span>\n        <button\n          type=\"button\"\n          class=\"crumb as-button crumb-section\"\n          data-crumb=\"section\"\n          (click)=\"onSelectSectionFromBreadcrumb($event)\"\n          [attr.aria-label]=\"'Selecionar Se\u00E7\u00E3o ' + (sectionIndex + 1)\"\n          >\n          Se\u00E7\u00E3o {{ sectionIndex + 1 }}\n        </button>\n        @if (selected?.rowIndex != null) {\n          <span class=\"sep\">\u203A</span>\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-row\"\n            data-crumb=\"row\"\n            (click)=\"onSelectRowFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Selecionar Linha ' + (selected!.rowIndex! + 1)\"\n            >\n            Linha {{ selected!.rowIndex! + 1 }}\n          </button>\n        }\n        @if (selected?.columnIndex != null) {\n          <span class=\"sep\">\u203A</span>\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-column\"\n            data-crumb=\"column\"\n            (click)=\"onSelectColumnFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Selecionar Coluna ' + (selected!.columnIndex! + 1)\"\n            >\n            Coluna {{ selected!.columnIndex! + 1 }}\n          </button>\n        }\n        @if (selected?.fieldName) {\n          <span class=\"sep\">\u203A</span>\n          <span class=\"crumb active\">{{ selected!.fieldName }}</span>\n        }\n        @if (selected) {\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-clear\"\n            data-crumb=\"clear\"\n            (click)=\"onClearSelectionFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Limpar sele\u00E7\u00E3o'\"\n            >\n            Limpar\n          </button>\n        }\n      </div>\n    } @else {\n      <h5>Linhas</h5>\n    }\n    <div\n      class=\"row-list\"\n      cdkDropList\n      [cdkDropListData]=\"section.rows\"\n      (cdkDropListDropped)=\"dropRow($event)\"\n      >\n      @for (row of section.rows; track row; let i = $index) {\n        <praxis-row-configurator\n          class=\"row-item\"\n          [row]=\"row\"\n          [fieldMetadata]=\"fieldMetadata\"\n          [availableFields]=\"availableFields\"\n          [sectionIndex]=\"sectionIndex\"\n          [rowIndex]=\"i\"\n          [isLastRow]=\"i === section.rows.length - 1\"\n          [selected]=\"selected\"\n          [availableFieldsListId]=\"availableFieldsListId\"\n          [connectedDropListIds]=\"columnDropListIds\"\n          [gapGlobal]=\"gapGlobal\"\n          (rowChange)=\"onRowUpdated(i, $event)\"\n          (applyRowGapAll)=\"onApplyRowGapAll($event)\"\n          (remove)=\"removeRow(i)\"\n          (select)=\"select.emit($event)\"\n          (fieldDrop)=\"onFieldDrop($event, i)\"\n          (addVisualBlock)=\"onAddVisualBlock($event)\"\n          (addApiField)=\"onAddApiField($event)\"\n          (addLocalField)=\"onAddLocalField($event)\"\n          (editField)=\"onEditField($event)\"\n          (editVisualBlock)=\"onEditVisualBlock($event)\"\n          (moveVisualBlock)=\"onMoveVisualBlock($event)\"\n          (moveVisualBlockToColumn)=\"onMoveVisualBlockToColumn($event)\"\n          (removeVisualBlock)=\"onRemoveVisualBlock($event)\"\n          cdkDrag\n        ></praxis-row-configurator>\n      }\n    </div>\n    <div class=\"section-actions\" aria-label=\"A\u00E7\u00F5es da se\u00E7\u00E3o\">\n      <button\n        class=\"fab-add-row\"\n        mat-fab\n        color=\"primary\"\n        (click)=\"addRow()\"\n        matTooltip=\"Adicionar linha\"\n        aria-label=\"Adicionar linha\"\n        >\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </mat-card-content>\n</mat-card>\n", styles: ["@charset \"UTF-8\";.section-card{background:var(--md-sys-color-surface, var(--sicoob-bg-elev-1));margin-bottom:16px;transition:border-color .2s ease;border:1px solid transparent;box-sizing:border-box;max-width:100%;min-width:0}.section-card.hovered{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-card.selected{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));box-shadow:0 0 0 2px var(--md-sys-color-primary)}.section-card.cdk-drag-dragging{cursor:grabbing}.section-card.cdk-drag-preview{box-sizing:border-box;border-color:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.section-card.cdk-drag-placeholder{position:relative;min-height:64px;border-color:transparent;background:transparent;box-shadow:none;opacity:1}.section-card.cdk-drag-placeholder>*{visibility:hidden}.section-card.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 12px auto 12px;height:2px;border-radius:999px;background:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary, var(--sicoob-primary-default)) 16%,transparent)}.section-card.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 5px);left:12px;width:10px;height:10px;border-radius:50%;background:var(--md-sys-color-primary, var(--sicoob-primary-default))}.section-card:focus-visible{outline:2px solid var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));outline-offset:2px}.section-card .mat-mdc-card-content{padding-bottom:var(--px-editor-section-gap, 16px)}.section-breadcrumbs{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin:4px 0 8px;display:flex;align-items:center;gap:6px}.section-breadcrumbs .as-button{background:transparent;border:none;padding:0 2px;color:inherit;font:inherit;cursor:pointer;border-radius:4px}.section-breadcrumbs .as-button:hover{color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-breadcrumbs .as-button:focus-visible{outline:2px solid var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));outline-offset:2px}.section-breadcrumbs .crumb-clear{margin-left:6px;opacity:.85}.section-breadcrumbs .crumb.active{color:var(--md-sys-color-on-surface);font-weight:600}.section-breadcrumbs .sep{opacity:.6}.section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;min-width:0}.title-wrapper{display:flex;align-items:center;gap:8px;width:100%;min-width:0;flex:1 1 auto}.section-heading{display:flex;align-items:center;gap:10px;min-width:0}.section-heading__icon{color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-heading__avatar{--_pfx-layout-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-layout-section-avatar-size);height:var(--_pfx-layout-section-avatar-size);border-radius:999px;flex:0 0 var(--_pfx-layout-section-avatar-size);overflow:hidden}.section-heading__avatar.size-sm{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-sm, 24px)}.section-heading__avatar.size-md{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px))}.section-heading__avatar.size-lg{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-lg, 40px)}.section-heading__avatar--text,.section-heading__avatar--placeholder{background:color-mix(in srgb,var(--pfx-editorial-form-accent, var(--md-sys-color-primary, var(--sicoob-primary-default))) 14%,var(--pfx-form-section-surface-flat, var(--md-sys-color-surface, var(--sicoob-bg-elev-1))));color:color-mix(in srgb,var(--pfx-editorial-form-accent, var(--md-sys-color-primary, var(--sicoob-primary-default))) 82%,var(--pfx-form-label-strong, var(--md-sys-color-on-surface, var(--sicoob-text-default))) 18%);font-size:calc(var(--_pfx-layout-section-avatar-size) * .41);font-weight:800;letter-spacing:.04em;text-transform:uppercase}.section-heading__avatar--placeholder mat-icon{font-size:calc(var(--_pfx-layout-section-avatar-size) * .5625);width:calc(var(--_pfx-layout-section-avatar-size) * .5625);height:calc(var(--_pfx-layout-section-avatar-size) * .5625);line-height:calc(var(--_pfx-layout-section-avatar-size) * .5625)}.section-heading__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.section-heading .section-name{font-weight:600;color:var(--md-sys-color-on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-heading .section-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-editor-trigger{margin-left:auto}.section-header-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.section-header-actions .mat-mdc-icon-button{width:36px;height:36px;padding:6px}.add-row-button{margin-top:8px}.row-item{animation:fadeIn .3s ease}.row-item.cdk-drag-dragging{cursor:grabbing}.row-item.cdk-drag-preview{box-sizing:border-box;border-radius:8px;background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.row-item.cdk-drag-placeholder{position:relative;display:block;min-height:56px;opacity:1}.row-item.cdk-drag-placeholder>*{visibility:hidden}.row-item.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 8px auto 8px;height:2px;border-radius:999px;background:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary, var(--sicoob-primary-default)) 16%,transparent)}.row-item.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 4px);left:8px;width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-primary, var(--sicoob-primary-default))}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.section-card:hover{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-card.collapsed .mat-mdc-card-content{display:none}:host ::ng-deep .section-card .mat-mdc-card-header{padding:8px 12px}:host ::ng-deep .section-card .mat-mdc-card-title{margin:0}:host ::ng-deep .section-card .mat-mdc-card-content{padding:0 12px 12px}.section-actions{position:relative;margin-top:12px;padding-top:16px;border-top:1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium)));min-height:28px}.row-list{border-top:1px solid var(--px-editor-separator-color, var(--md-sys-color-outline-variant));padding-top:12px;margin-top:8px;min-width:0}.fab-add-row{position:absolute;top:-15px;left:50%;transform:translate(-50%,calc(-50% - var(--pfx-divider-w, 1px)));z-index:2;--pfx-fab-size: var(--pfx-fab-size-row, 32px);--pfx-fab-icon: var(--pfx-fab-icon-row, 18px);width:var(--pfx-fab-size);height:var(--pfx-fab-size);border-radius:50%}.fab-add-row.mat-mdc-fab{width:var(--pfx-fab-size);height:var(--pfx-fab-size);padding:0}.fab-add-row .mat-mdc-button-touch-target,.fab-add-row .mat-mdc-button-persistent-ripple,.fab-add-row .mat-mdc-button-ripple{width:var(--pfx-fab-size);height:var(--pfx-fab-size)}.fab-add-row mat-icon{font-size:var(--pfx-fab-icon);width:var(--pfx-fab-icon);height:var(--pfx-fab-icon)}@media(max-width:700px){.section-header{position:relative;align-items:flex-start;display:block;min-height:88px;padding-right:12px}.title-wrapper{align-items:flex-start;padding-right:132px;width:auto}.section-heading{align-items:flex-start;gap:12px}.section-heading__icon{margin-top:4px}.section-heading .section-name{font-size:20px;line-height:26px}.section-header-actions{position:absolute;top:12px;right:12px;margin-left:0}.section-editor-trigger{position:absolute;top:12px;right:88px;margin-left:0}.section-editor-trigger,.section-header-actions .mat-mdc-icon-button{width:36px;height:36px;padding:6px}.section-heading .section-name,.section-heading .section-desc{overflow:visible;text-overflow:clip;white-space:normal}}\n"] }]
+                    ], template: "<mat-card\n  class=\"section-card\"\n  cdkDrag\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  [class.hovered]=\"isHovered\"\n  [class.selected]=\"isThisSectionSelected()\"\n  [class.collapsed]=\"isCollapsed\"\n  (click)=\"onSelectSection()\"\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.aria-label]=\"'Se\u00E7\u00E3o ' + (sectionIndex + 1)\"\n  [attr.aria-selected]=\"isThisSectionSelected()\"\n  >\n  <mat-card-header class=\"section-header\">\n    <mat-card-title class=\"title-wrapper\">\n      <div class=\"section-heading\">\n        @let headerPreview = getSectionHeaderPreview();\n        @let headerAvatarSize = getSectionHeaderAvatarSize();\n        @if (headerPreview.kind === 'icon') {\n          <mat-icon class=\"section-heading__icon\" aria-hidden=\"true\" [praxisIcon]=\"headerPreview.icon\"></mat-icon>\n        }\n        @if (headerPreview.kind === 'initials') {\n          <span class=\"section-heading__avatar section-heading__avatar--text\" [class.size-sm]=\"headerAvatarSize === 'sm'\"\n            [class.size-md]=\"headerAvatarSize === 'md'\" [class.size-lg]=\"headerAvatarSize === 'lg'\"\n            [matTooltip]=\"headerPreview.tooltip || ''\" [matTooltipDisabled]=\"!headerPreview.tooltip\">\n            {{ headerPreview.text }}\n          </span>\n        }\n        @if (headerPreview.kind === 'placeholder') {\n          <span class=\"section-heading__avatar section-heading__avatar--placeholder\" [class.size-sm]=\"headerAvatarSize === 'sm'\"\n            [class.size-md]=\"headerAvatarSize === 'md'\" [class.size-lg]=\"headerAvatarSize === 'lg'\"\n            [matTooltip]=\"headerPreview.tooltip || ''\" [matTooltipDisabled]=\"!headerPreview.tooltip\">\n            @if (headerPreview.icon) {\n              <mat-icon aria-hidden=\"true\" [praxisIcon]=\"headerPreview.icon\"></mat-icon>\n            }\n          </span>\n        }\n        <div class=\"section-heading__text\">\n          <span class=\"section-name\">{{ section.title || 'Sem t\u00EDtulo' }}</span>\n          @if (section.description) {\n            <span class=\"section-desc\">{{ section.description }}</span>\n          }\n        </div>\n      </div>\n      <button\n        praxisIconButton=\"open_in_new\"\n        size=\"dense\"\n        type=\"button\"\n        class=\"section-editor-trigger primary-action\"\n        (click)=\"openAdvancedEditor($event)\"\n        matTooltip=\"Para editar o t\u00EDtulo, use o editor completo da se\u00E7\u00E3o\"\n        aria-label=\"Abrir editor da se\u00E7\u00E3o\"\n        >\n      </button>\n    </mat-card-title>\n    <div class=\"section-header-actions\">\n      <button\n        [praxisIconButton]=\"isCollapsed ? 'unfold_more' : 'unfold_less'\"\n        size=\"dense\"\n        class=\"section-collapse-btn\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n        [attr.aria-label]=\"isCollapsed ? 'Expandir se\u00E7\u00E3o' : 'Colapsar se\u00E7\u00E3o'\"\n        [matTooltip]=\"isCollapsed ? 'Expandir se\u00E7\u00E3o' : 'Colapsar se\u00E7\u00E3o'\"\n        >\n      </button>\n      <button\n        praxisIconButton=\"more_vert\"\n        size=\"dense\"\n        class=\"section-menu-btn\"\n        [matMenuTriggerFor]=\"sectionMenu\"\n        aria-label=\"Mais a\u00E7\u00F5es da se\u00E7\u00E3o\"\n        matTooltip=\"Mais a\u00E7\u00F5es\"\n        >\n      </button>\n    </div>\n    <mat-menu #sectionMenu=\"matMenu\">\n      <button mat-menu-item (click)=\"openSectionPresets()\">\n        <mat-icon [praxisIcon]=\"'view_quilt'\"></mat-icon>\n        <span>Presets de se\u00E7\u00E3o\u2026</span>\n      </button>\n      <button mat-menu-item (click)=\"applyCurrentStyleToAll()\">\n        <mat-icon [praxisIcon]=\"'format_paint'\"></mat-icon>\n        <span>Aplicar estilo desta se\u00E7\u00E3o a todas</span>\n      </button>\n      <mat-divider></mat-divider>\n      @if (section.description == null) {\n        <button mat-menu-item (click)=\"section.description = ''; onSectionUpdated()\">\n          <mat-icon [praxisIcon]=\"'note_add'\"></mat-icon>\n          <span>Adicionar descri\u00E7\u00E3o</span>\n        </button>\n      }\n      @if (section.description != null) {\n        <button mat-menu-item (click)=\"section.description = undefined; onSectionUpdated()\">\n          <mat-icon [praxisIcon]=\"'backspace'\"></mat-icon>\n          <span>Remover descri\u00E7\u00E3o</span>\n        </button>\n      }\n      <mat-divider></mat-divider>\n      <button mat-menu-item (click)=\"onRemoveSection()\">\n        <mat-icon [praxisIcon]=\"'delete'\"></mat-icon>\n        <span>Remover se\u00E7\u00E3o</span>\n      </button>\n    </mat-menu>\n  </mat-card-header>\n  <mat-card-content [attr.aria-hidden]=\"isCollapsed\">\n    @if (isThisSectionSelected()) {\n      <div class=\"section-breadcrumbs\" (click)=\"$event.stopPropagation()\">\n        <button\n          type=\"button\"\n          class=\"crumb as-button\"\n          data-crumb=\"layout\"\n          [attr.aria-label]=\"'Voltar ao Layout'\"\n          disabled\n          >\n          Layout\n        </button>\n        <span class=\"sep\">\u203A</span>\n        <button\n          type=\"button\"\n          class=\"crumb as-button crumb-section\"\n          data-crumb=\"section\"\n          (click)=\"onSelectSectionFromBreadcrumb($event)\"\n          [attr.aria-label]=\"'Selecionar Se\u00E7\u00E3o ' + (sectionIndex + 1)\"\n          >\n          Se\u00E7\u00E3o {{ sectionIndex + 1 }}\n        </button>\n        @if (selected?.rowIndex != null) {\n          <span class=\"sep\">\u203A</span>\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-row\"\n            data-crumb=\"row\"\n            (click)=\"onSelectRowFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Selecionar Linha ' + (selected!.rowIndex! + 1)\"\n            >\n            Linha {{ selected!.rowIndex! + 1 }}\n          </button>\n        }\n        @if (selected?.columnIndex != null) {\n          <span class=\"sep\">\u203A</span>\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-column\"\n            data-crumb=\"column\"\n            (click)=\"onSelectColumnFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Selecionar Coluna ' + (selected!.columnIndex! + 1)\"\n            >\n            Coluna {{ selected!.columnIndex! + 1 }}\n          </button>\n        }\n        @if (selected?.fieldName) {\n          <span class=\"sep\">\u203A</span>\n          <span class=\"crumb active\">{{ selected!.fieldName }}</span>\n        }\n        @if (selected) {\n          <button\n            type=\"button\"\n            class=\"crumb as-button crumb-clear\"\n            data-crumb=\"clear\"\n            (click)=\"onClearSelectionFromBreadcrumb($event)\"\n            [attr.aria-label]=\"'Limpar sele\u00E7\u00E3o'\"\n            >\n            Limpar\n          </button>\n        }\n      </div>\n    } @else {\n      <h5>Linhas</h5>\n    }\n    <div\n      class=\"row-list\"\n      cdkDropList\n      [cdkDropListData]=\"section.rows\"\n      (cdkDropListDropped)=\"dropRow($event)\"\n      >\n      @for (row of section.rows; track row; let i = $index) {\n        <praxis-row-configurator\n          class=\"row-item\"\n          [row]=\"row\"\n          [fieldMetadata]=\"fieldMetadata\"\n          [availableFields]=\"availableFields\"\n          [sectionIndex]=\"sectionIndex\"\n          [rowIndex]=\"i\"\n          [isLastRow]=\"i === section.rows.length - 1\"\n          [selected]=\"selected\"\n          [availableFieldsListId]=\"availableFieldsListId\"\n          [connectedDropListIds]=\"columnDropListIds\"\n          [gapGlobal]=\"gapGlobal\"\n          (rowChange)=\"onRowUpdated(i, $event)\"\n          (applyRowGapAll)=\"onApplyRowGapAll($event)\"\n          (remove)=\"removeRow(i)\"\n          (select)=\"select.emit($event)\"\n          (fieldDrop)=\"onFieldDrop($event, i)\"\n          (addVisualBlock)=\"onAddVisualBlock($event)\"\n          (addApiField)=\"onAddApiField($event)\"\n          (addLocalField)=\"onAddLocalField($event)\"\n          (editField)=\"onEditField($event)\"\n          (editVisualBlock)=\"onEditVisualBlock($event)\"\n          (moveVisualBlock)=\"onMoveVisualBlock($event)\"\n          (moveVisualBlockToColumn)=\"onMoveVisualBlockToColumn($event)\"\n          (removeVisualBlock)=\"onRemoveVisualBlock($event)\"\n          cdkDrag\n        ></praxis-row-configurator>\n      }\n    </div>\n    <div class=\"section-actions\" aria-label=\"A\u00E7\u00F5es da se\u00E7\u00E3o\">\n      <button\n        class=\"fab-add-row\"\n        mat-fab\n        color=\"primary\"\n        (click)=\"addRow()\"\n        matTooltip=\"Adicionar linha\"\n        aria-label=\"Adicionar linha\"\n        >\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </mat-card-content>\n</mat-card>\n", styles: ["@charset \"UTF-8\";.section-card{background:var(--md-sys-color-surface, var(--sicoob-bg-elev-1));margin-bottom:16px;transition:border-color .2s ease;border:1px solid transparent;box-sizing:border-box;max-width:100%;min-width:0}.section-card.hovered{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-card.selected{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));box-shadow:0 0 0 2px var(--md-sys-color-primary)}.section-card.cdk-drag-dragging{cursor:grabbing}.section-card.cdk-drag-preview{box-sizing:border-box;border-color:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.section-card.cdk-drag-placeholder{position:relative;min-height:64px;border-color:transparent;background:transparent;box-shadow:none;opacity:1}.section-card.cdk-drag-placeholder>*{visibility:hidden}.section-card.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 12px auto 12px;height:2px;border-radius:999px;background:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary, var(--sicoob-primary-default)) 16%,transparent)}.section-card.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 5px);left:12px;width:10px;height:10px;border-radius:50%;background:var(--md-sys-color-primary, var(--sicoob-primary-default))}.section-card:focus-visible{outline:2px solid var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));outline-offset:2px}.section-card .mat-mdc-card-content{padding-bottom:var(--px-editor-section-gap, 16px)}.section-breadcrumbs{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin:4px 0 8px;display:flex;align-items:center;gap:6px}.section-breadcrumbs .as-button{background:transparent;border:none;padding:0 2px;color:inherit;font:inherit;cursor:pointer;border-radius:4px}.section-breadcrumbs .as-button:hover{color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-breadcrumbs .as-button:focus-visible{outline:2px solid var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)));outline-offset:2px}.section-breadcrumbs .crumb-clear{margin-left:6px;opacity:.85}.section-breadcrumbs .crumb.active{color:var(--md-sys-color-on-surface);font-weight:600}.section-breadcrumbs .sep{opacity:.6}.section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;min-width:0}.title-wrapper{display:flex;align-items:center;gap:8px;width:100%;min-width:0;flex:1 1 auto}.section-heading{display:flex;align-items:center;gap:10px;min-width:0}.section-heading__icon{color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-heading__avatar{--_pfx-layout-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-layout-section-avatar-size);height:var(--_pfx-layout-section-avatar-size);border-radius:999px;flex:0 0 var(--_pfx-layout-section-avatar-size);overflow:hidden}.section-heading__avatar.size-sm{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-sm, 24px)}.section-heading__avatar.size-md{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-md, var(--pfx-form-section-avatar-size, 32px))}.section-heading__avatar.size-lg{--_pfx-layout-section-avatar-size: var(--pfx-form-section-avatar-size-lg, 40px)}.section-heading__avatar--text,.section-heading__avatar--placeholder{background:color-mix(in srgb,var(--pfx-editorial-form-accent, var(--md-sys-color-primary, var(--sicoob-primary-default))) 14%,var(--pfx-form-section-surface-flat, var(--md-sys-color-surface, var(--sicoob-bg-elev-1))));color:color-mix(in srgb,var(--pfx-editorial-form-accent, var(--md-sys-color-primary, var(--sicoob-primary-default))) 82%,var(--pfx-form-label-strong, var(--md-sys-color-on-surface, var(--sicoob-text-default))) 18%);font-size:calc(var(--_pfx-layout-section-avatar-size) * .41);font-weight:800;letter-spacing:.04em;text-transform:uppercase}.section-heading__avatar--placeholder mat-icon{font-size:calc(var(--_pfx-layout-section-avatar-size) * .5625);width:calc(var(--_pfx-layout-section-avatar-size) * .5625);height:calc(var(--_pfx-layout-section-avatar-size) * .5625);line-height:calc(var(--_pfx-layout-section-avatar-size) * .5625)}.section-heading__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.section-heading .section-name{font-weight:600;color:var(--md-sys-color-on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-heading .section-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-editor-trigger{margin-left:auto}.section-editor-trigger.primary-action{color:var(--md-sys-color-primary)}.section-header-actions{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.add-row-button{margin-top:8px}.row-item{animation:fadeIn .3s ease}.row-item.cdk-drag-dragging{cursor:grabbing}.row-item.cdk-drag-preview{box-sizing:border-box;border-radius:8px;background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));box-shadow:var(--md-sys-elevation-level3);cursor:grabbing}.row-item.cdk-drag-placeholder{position:relative;display:block;min-height:56px;opacity:1}.row-item.cdk-drag-placeholder>*{visibility:hidden}.row-item.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:calc(50% - 1px) 8px auto 8px;height:2px;border-radius:999px;background:var(--md-sys-color-primary, var(--sicoob-primary-default));box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary, var(--sicoob-primary-default)) 16%,transparent)}.row-item.cdk-drag-placeholder:after{content:\"\";position:absolute;top:calc(50% - 4px);left:8px;width:8px;height:8px;border-radius:50%;background:var(--md-sys-color-primary, var(--sicoob-primary-default))}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.section-card:hover{border-color:var(--md-sys-color-primary, var(--md-sys-color-primary, var(--sicoob-primary-default)))}.section-card.collapsed .mat-mdc-card-content{display:none}:host ::ng-deep .section-card .mat-mdc-card-header{padding:8px 12px}:host ::ng-deep .section-card .mat-mdc-card-title{margin:0}:host ::ng-deep .section-card .mat-mdc-card-content{padding:0 12px 12px}.section-actions{position:relative;margin-top:12px;padding-top:16px;border-top:1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium)));min-height:28px}.row-list{border-top:1px solid var(--px-editor-separator-color, var(--md-sys-color-outline-variant));padding-top:12px;margin-top:8px;min-width:0}.fab-add-row{position:absolute;top:-15px;left:50%;transform:translate(-50%,calc(-50% - var(--pfx-divider-w, 1px)));z-index:2;--pfx-fab-size: var(--pfx-fab-size-row, 32px);--pfx-fab-icon: var(--pfx-fab-icon-row, 18px);width:var(--pfx-fab-size);height:var(--pfx-fab-size);border-radius:50%}.fab-add-row.mat-mdc-fab{width:var(--pfx-fab-size);height:var(--pfx-fab-size);padding:0}.fab-add-row .mat-mdc-button-touch-target,.fab-add-row .mat-mdc-button-persistent-ripple,.fab-add-row .mat-mdc-button-ripple{width:var(--pfx-fab-size);height:var(--pfx-fab-size)}.fab-add-row mat-icon{font-size:var(--pfx-fab-icon);width:var(--pfx-fab-icon);height:var(--pfx-fab-icon)}@media(max-width:700px){.section-header{position:relative;align-items:flex-start;display:block;min-height:88px;padding-right:12px}.title-wrapper{align-items:flex-start;padding-right:132px;width:auto}.section-heading{align-items:flex-start;gap:12px}.section-heading__icon{margin-top:4px}.section-heading .section-name{font-size:20px;line-height:26px}.section-header-actions{position:absolute;top:12px;right:12px;margin-left:0}.section-editor-trigger{position:absolute;top:12px;right:88px;margin-left:0}.section-heading .section-name,.section-heading .section-desc{overflow:visible;text-overflow:clip;white-space:normal}}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.MatDialog }, { type: SectionPresetRegistry }, { type: i7.SettingsPanelService }], propDecorators: { section: [{
                 type: Input
             }], sectionIndex: [{
@@ -22621,8 +22609,7 @@ class LayoutEditorComponent {
         <div class="toolbar-group gap-group">
           <span class="group-label">Gap padrão entre colunas</span>
           <div class="gap-chip" matTooltip="Padrão herdado pelas seções que não personalizaram o gap entre colunas" aria-label="Espaço padrão entre colunas">
-            <button mat-icon-button class="gap-chip__btn" (click)="adjustGapGlobal(-4)" aria-label="Reduzir gap global">
-              <mat-icon>remove</mat-icon>
+            <button praxisIconButton="remove" size="dense" class="gap-chip__btn" (click)="adjustGapGlobal(-4)" aria-label="Reduzir gap global">
             </button>
             <input
               class="gap-chip__input"
@@ -22634,12 +22621,12 @@ class LayoutEditorComponent {
               aria-label="Valor do gap global"
               />
             <span class="gap-chip__suffix">px</span>
-            <button mat-icon-button class="gap-chip__btn" (click)="adjustGapGlobal(4)" aria-label="Aumentar gap global">
-              <mat-icon>add</mat-icon>
+            <button praxisIconButton="add" size="dense" class="gap-chip__btn" (click)="adjustGapGlobal(4)" aria-label="Aumentar gap global">
             </button>
           </div>
           <button
-            mat-icon-button
+            praxisIconButton="done_all"
+            size="dense"
             class="gap-chip__btn"
             type="button"
             (click)="applyGapToAll()"
@@ -22647,7 +22634,6 @@ class LayoutEditorComponent {
             matTooltip="Aplicar este gap global em todas as seções sem gap personalizado"
             aria-label="Aplicar gap global em todas as seções sem personalização"
             >
-            <mat-icon>done_all</mat-icon>
           </button>
         </div>
       </mat-toolbar>
@@ -22660,13 +22646,13 @@ class LayoutEditorComponent {
         }"
           >
           <button
-            mat-icon-button
+            praxisIconButton="chevron_right"
+            size="compact"
             class="collapse-toggle"
             (click)="togglePalette()"
             aria-label="Colapsar lista de campos"
             matTooltip="Colapsar lista de campos"
             >
-            <mat-icon>chevron_right</mat-icon>
           </button>
           <h4>{{ t('apiFields.heading') }}</h4>
           <small class="available-fields__hint">{{ t('apiFields.hint') }}</small>
@@ -22687,13 +22673,13 @@ class LayoutEditorComponent {
       }
       @if (paletteCollapsed && availableFields.length) {
         <button
-          mat-icon-button
+          praxisIconButton="chevron_left"
+          size="compact"
           class="collapse-toggle"
           (click)="togglePalette()"
           aria-label="Expandir lista de campos"
           matTooltip="Expandir lista de campos"
           >
-          <mat-icon>chevron_left</mat-icon>
         </button>
       }
       <div class="layout-canvas">
@@ -22755,7 +22741,7 @@ class LayoutEditorComponent {
         </div>
       </div>
     </div>
-    `, isInline: true, styles: [".layout-editor-wrapper{display:flex;flex-wrap:wrap;gap:16px;min-width:0;width:100%}.layout-editor-wrapper.no-available-fields{flex-direction:column;gap:0}.editor-toolbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:16px;align-items:center;min-height:56px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--md-sys-elevation-level1, var(--md-sys-elevation-level1));padding:0 12px;margin:0 0 var(--px-editor-section-gap, 16px) 0;width:100%;box-sizing:border-box;height:auto;white-space:normal}.editor-toolbar .title-block{display:flex;flex-direction:column;justify-content:center;gap:2px}.editor-toolbar .toolbar-title{font:var(--mdc-typography-title-small, 600 15px/20px system-ui);color:var(--md-sys-color-on-surface)}.editor-toolbar .toolbar-subtitle{font:var(--mdc-typography-body-small, 400 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .spacer{flex:1 1 auto}.editor-toolbar .toolbar-group{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.editor-toolbar .gap-group{align-items:center}.editor-toolbar .group-label{font:var(--mdc-typography-label-medium, 500 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .gap-group{align-items:center;gap:10px}.editor-toolbar .density-control{display:flex;align-items:center;gap:8px}.editor-toolbar .density-label{font:var(--mdc-typography-label-medium, 500 12px/16px system-ui);opacity:.9}.editor-toolbar .density-toggle,.editor-toolbar .toggle-icons-group{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;overflow:hidden;background:var(--md-sys-color-surface-container-low)}.editor-toolbar .density-toggle .mat-button-toggle,.editor-toolbar .toggle-icons-group .mat-button-toggle{background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .density-toggle .mat-button-toggle+.mat-button-toggle,.editor-toolbar .toggle-icons-group .mat-button-toggle+.mat-button-toggle{border-left:1px solid var(--md-sys-color-outline-variant)}.editor-toolbar .density-toggle .mat-button-toggle-button,.toggle-icons-group .mat-button-toggle-button{height:32px}.editor-toolbar .density-toggle .mat-icon,.toggle-icons-group .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.editor-toolbar .density-toggle .mat-icon,.editor-toolbar .toggle-icons-group .mat-icon{color:inherit}.gap-chip{display:inline-flex;align-items:center;gap:2px;padding:0 4px;height:32px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-variant)}.gap-chip__btn{width:24px;height:24px;line-height:24px;min-width:0;padding:0;--mdc-icon-button-size: 24px;--mdc-icon-button-state-layer-size: 24px}.gap-chip .mat-mdc-button-touch-target{width:24px;height:24px}.gap-chip mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.gap-chip__input{width:42px;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 600 13px/18px system-ui);text-align:center;outline:none;-moz-appearance:textfield}.gap-chip__input::-webkit-outer-spin-button,.gap-chip__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-chip__suffix{color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font-size:12px}.pill.subtle{background:transparent;color:var(--md-sys-color-on-surface-variant);padding-left:0}.available-fields{width:250px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:10px;background:var(--md-sys-color-surface)}.collapse-toggle{float:right}.available-fields__hint{display:block;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px}.no-fields-chip{position:absolute;top:8px;right:8px;padding:4px 8px;border:1px dashed var(--md-sys-color-outline);border-radius:16px;color:var(--md-sys-color-outline);font-size:12px;background:var(--md-sys-color-surface);pointer-events:none}.layout-canvas{flex-grow:1;flex-basis:100%;min-width:0;width:100%;overflow:visible;max-height:none;position:relative}.field-list{min-height:100px}.section-list{display:flex;flex-direction:column;gap:var(--pfx-section-gap, 20px)}.section-list:empty{min-height:48px}.add-section-container{position:relative;padding-top:16px;margin-top:12px;border-top:1px solid var(--md-sys-color-outline-variant);min-height:28px}.fab-add-section{position:absolute;top:-30px;left:50%;transform:translate(-50%,calc(-50% - var(--pfx-divider-w, 1px)));z-index:2;--pfx-fab-size: var(--pfx-fab-size-section, 32px);--pfx-fab-icon: var(--pfx-fab-icon-section, 18px);width:var(--pfx-fab-size);height:var(--pfx-fab-size);border-radius:50%}.fab-add-section mat-icon{font-size:var(--pfx-fab-icon);width:var(--pfx-fab-icon);height:var(--pfx-fab-icon)}.fab-add-section.mat-mdc-fab{width:var(--pfx-fab-size);height:var(--pfx-fab-size);padding:0}.fab-add-section .mat-mdc-button-touch-target,.fab-add-section .mat-mdc-button-persistent-ripple,.fab-add-section .mat-mdc-button-ripple{width:var(--pfx-fab-size);height:var(--pfx-fab-size)}.cdk-drag-placeholder{opacity:.3;transition:opacity .2s ease}:host ::ng-deep .mdc-text-field--filled{--mdc-filled-text-field-container-color: var(--md-sys-color-surface-container)}:host ::ng-deep .mdc-text-field__input::placeholder{color:var(--md-sys-color-on-surface-variant)!important;opacity:.95}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .mat-mdc-hint{color:var(--md-sys-color-on-surface-variant)!important}:host ::ng-deep .mdc-text-field--disabled .mdc-text-field__input,:host ::ng-deep .mat-mdc-select-disabled .mat-mdc-select-value{color:var(--md-sys-color-on-surface-variant)!important}:host ::ng-deep .mat-button-toggle-checked{background:var(--md-sys-color-primary-container)!important;color:var(--md-sys-color-on-primary-container)!important}:host ::ng-deep .editor-toolbar .mat-button-toggle-appearance-standard{color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .editor-toolbar .mat-button-toggle-appearance-standard:hover{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}:host ::ng-deep .editor-toolbar .mat-button-toggle-checked:hover{background:var(--md-sys-color-primary-container)!important;color:var(--md-sys-color-on-primary-container)!important}:host{--px-editor-section-gap: 16px;--pfx-grid-gap: 12px;--pfx-section-gap: var(--px-editor-section-gap)}@media(min-width:960px){:host{--px-editor-section-gap: 20px;--pfx-grid-gap: 16px}}@media(min-width:1280px){:host{--px-editor-section-gap: 24px;--pfx-grid-gap: 20px}}@media(max-width:700px){.editor-toolbar{position:static;align-items:flex-start;gap:12px;min-height:0;padding:12px;row-gap:12px}.editor-toolbar .spacer{display:none}.editor-toolbar .title-block,.editor-toolbar .toolbar-group{flex:1 1 100%}.editor-toolbar .title-block{gap:4px}.editor-toolbar .toolbar-group{align-items:flex-start;justify-content:flex-start}.editor-toolbar .group-label{flex:0 0 100%}.editor-toolbar .density-toggle,.editor-toolbar .toggle-icons-group{max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: SectionConfiguratorComponent, selector: "praxis-section-configurator", inputs: ["section", "sectionIndex", "allSections", "fieldMetadata", "availableFields", "selected", "availableFieldsListId", "columnDropListIds", "gapGlobal"], outputs: ["sectionChange", "applyStyleToAll", "remove", "select", "fieldDrop", "addVisualBlock", "addApiField", "addLocalField", "editField", "editVisualBlock", "moveVisualBlock", "moveVisualBlockToColumn", "removeVisualBlock"] }, { kind: "component", type: FieldConfiguratorComponent, selector: "praxis-field-configurator", inputs: ["field"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i6$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: 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.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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, styles: [".layout-editor-wrapper{display:flex;flex-wrap:wrap;gap:16px;min-width:0;width:100%}.layout-editor-wrapper.no-available-fields{flex-direction:column;gap:0}.editor-toolbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:16px;align-items:center;min-height:56px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--md-sys-elevation-level1, var(--md-sys-elevation-level1));padding:0 12px;margin:0 0 var(--px-editor-section-gap, 16px) 0;width:100%;box-sizing:border-box;height:auto;white-space:normal}.editor-toolbar .title-block{display:flex;flex-direction:column;justify-content:center;gap:2px}.editor-toolbar .toolbar-title{font:var(--mdc-typography-title-small, 600 15px/20px system-ui);color:var(--md-sys-color-on-surface)}.editor-toolbar .toolbar-subtitle{font:var(--mdc-typography-body-small, 400 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .spacer{flex:1 1 auto}.editor-toolbar .toolbar-group{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.editor-toolbar .gap-group{align-items:center}.editor-toolbar .group-label{font:var(--mdc-typography-label-medium, 500 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .gap-group{align-items:center;gap:10px}.editor-toolbar .density-control{display:flex;align-items:center;gap:8px}.editor-toolbar .density-label{font:var(--mdc-typography-label-medium, 500 12px/16px system-ui);opacity:.9}.editor-toolbar .density-toggle,.editor-toolbar .toggle-icons-group{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;overflow:hidden;background:var(--md-sys-color-surface-container-low)}.editor-toolbar .density-toggle .mat-button-toggle,.editor-toolbar .toggle-icons-group .mat-button-toggle{background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .density-toggle .mat-button-toggle+.mat-button-toggle,.editor-toolbar .toggle-icons-group .mat-button-toggle+.mat-button-toggle{border-left:1px solid var(--md-sys-color-outline-variant)}.editor-toolbar .density-toggle .mat-button-toggle-button,.toggle-icons-group .mat-button-toggle-button{height:32px}.editor-toolbar .density-toggle .mat-icon,.toggle-icons-group .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.editor-toolbar .density-toggle .mat-icon,.editor-toolbar .toggle-icons-group .mat-icon{color:inherit}.gap-chip{display:inline-flex;align-items:center;gap:2px;padding:0 4px;min-height:40px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-variant)}.gap-chip__input{width:42px;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 600 13px/18px system-ui);text-align:center;outline:none;-moz-appearance:textfield}.gap-chip__input::-webkit-outer-spin-button,.gap-chip__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-chip__suffix{color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font-size:12px}.pill.subtle{background:transparent;color:var(--md-sys-color-on-surface-variant);padding-left:0}.available-fields{width:250px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:10px;background:var(--md-sys-color-surface)}.collapse-toggle{float:right}.available-fields__hint{display:block;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px}.no-fields-chip{position:absolute;top:8px;right:8px;padding:4px 8px;border:1px dashed var(--md-sys-color-outline);border-radius:16px;color:var(--md-sys-color-outline);font-size:12px;background:var(--md-sys-color-surface);pointer-events:none}.layout-canvas{flex-grow:1;flex-basis:100%;min-width:0;width:100%;overflow:visible;max-height:none;position:relative}.field-list{min-height:100px}.section-list{display:flex;flex-direction:column;gap:var(--pfx-section-gap, 20px)}.section-list:empty{min-height:48px}.add-section-container{position:relative;padding-top:16px;margin-top:12px;border-top:1px solid var(--md-sys-color-outline-variant);min-height:28px}.fab-add-section{position:absolute;top:-30px;left:50%;transform:translate(-50%,calc(-50% - var(--pfx-divider-w, 1px)));z-index:2;--pfx-fab-size: var(--pfx-fab-size-section, 32px);--pfx-fab-icon: var(--pfx-fab-icon-section, 18px);width:var(--pfx-fab-size);height:var(--pfx-fab-size);border-radius:50%}.fab-add-section mat-icon{font-size:var(--pfx-fab-icon);width:var(--pfx-fab-icon);height:var(--pfx-fab-icon)}.fab-add-section.mat-mdc-fab{width:var(--pfx-fab-size);height:var(--pfx-fab-size);padding:0}.fab-add-section .mat-mdc-button-touch-target,.fab-add-section .mat-mdc-button-persistent-ripple,.fab-add-section .mat-mdc-button-ripple{width:var(--pfx-fab-size);height:var(--pfx-fab-size)}.cdk-drag-placeholder{opacity:.3;transition:opacity .2s ease}:host ::ng-deep .mdc-text-field--filled{--mdc-filled-text-field-container-color: var(--md-sys-color-surface-container)}:host ::ng-deep .mdc-text-field__input::placeholder{color:var(--md-sys-color-on-surface-variant)!important;opacity:.95}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .mat-mdc-hint{color:var(--md-sys-color-on-surface-variant)!important}:host ::ng-deep .mdc-text-field--disabled .mdc-text-field__input,:host ::ng-deep .mat-mdc-select-disabled .mat-mdc-select-value{color:var(--md-sys-color-on-surface-variant)!important}:host ::ng-deep .mat-button-toggle-checked{background:var(--md-sys-color-primary-container)!important;color:var(--md-sys-color-on-primary-container)!important}:host ::ng-deep .editor-toolbar .mat-button-toggle-appearance-standard{color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .editor-toolbar .mat-button-toggle-appearance-standard:hover{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}:host ::ng-deep .editor-toolbar .mat-button-toggle-checked:hover{background:var(--md-sys-color-primary-container)!important;color:var(--md-sys-color-on-primary-container)!important}:host{--px-editor-section-gap: 16px;--pfx-grid-gap: 12px;--pfx-section-gap: var(--px-editor-section-gap)}@media(min-width:960px){:host{--px-editor-section-gap: 20px;--pfx-grid-gap: 16px}}@media(min-width:1280px){:host{--px-editor-section-gap: 24px;--pfx-grid-gap: 20px}}@media(max-width:700px){.editor-toolbar{position:static;align-items:flex-start;gap:12px;min-height:0;padding:12px;row-gap:12px}.editor-toolbar .spacer{display:none}.editor-toolbar .title-block,.editor-toolbar .toolbar-group{flex:1 1 100%}.editor-toolbar .title-block{gap:4px}.editor-toolbar .toolbar-group{align-items:flex-start;justify-content:flex-start}.editor-toolbar .group-label{flex:0 0 100%}.editor-toolbar .density-toggle,.editor-toolbar .toggle-icons-group{max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: SectionConfiguratorComponent, selector: "praxis-section-configurator", inputs: ["section", "sectionIndex", "allSections", "fieldMetadata", "availableFields", "selected", "availableFieldsListId", "columnDropListIds", "gapGlobal"], outputs: ["sectionChange", "applyStyleToAll", "remove", "select", "fieldDrop", "addVisualBlock", "addApiField", "addLocalField", "editField", "editVisualBlock", "moveVisualBlock", "moveVisualBlockToColumn", "removeVisualBlock"] }, { kind: "component", type: FieldConfiguratorComponent, selector: "praxis-field-configurator", inputs: ["field"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i6$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: 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.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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutEditorComponent, decorators: [{
             type: Component,
@@ -22771,6 +22757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatToolbarModule,
                         MatButtonToggleModule,
                         FormsModule,
+                        PraxisIconButtonComponent,
                     ], template: `
     <div class="layout-editor-wrapper"
       cdkDropListGroup
@@ -22813,8 +22800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <div class="toolbar-group gap-group">
           <span class="group-label">Gap padrão entre colunas</span>
           <div class="gap-chip" matTooltip="Padrão herdado pelas seções que não personalizaram o gap entre colunas" aria-label="Espaço padrão entre colunas">
-            <button mat-icon-button class="gap-chip__btn" (click)="adjustGapGlobal(-4)" aria-label="Reduzir gap global">
-              <mat-icon>remove</mat-icon>
+            <button praxisIconButton="remove" size="dense" class="gap-chip__btn" (click)="adjustGapGlobal(-4)" aria-label="Reduzir gap global">
             </button>
             <input
               class="gap-chip__input"
@@ -22826,12 +22812,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               aria-label="Valor do gap global"
               />
             <span class="gap-chip__suffix">px</span>
-            <button mat-icon-button class="gap-chip__btn" (click)="adjustGapGlobal(4)" aria-label="Aumentar gap global">
-              <mat-icon>add</mat-icon>
+            <button praxisIconButton="add" size="dense" class="gap-chip__btn" (click)="adjustGapGlobal(4)" aria-label="Aumentar gap global">
             </button>
           </div>
           <button
-            mat-icon-button
+            praxisIconButton="done_all"
+            size="dense"
             class="gap-chip__btn"
             type="button"
             (click)="applyGapToAll()"
@@ -22839,7 +22825,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             matTooltip="Aplicar este gap global em todas as seções sem gap personalizado"
             aria-label="Aplicar gap global em todas as seções sem personalização"
             >
-            <mat-icon>done_all</mat-icon>
           </button>
         </div>
       </mat-toolbar>
@@ -22852,13 +22837,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }"
           >
           <button
-            mat-icon-button
+            praxisIconButton="chevron_right"
+            size="compact"
             class="collapse-toggle"
             (click)="togglePalette()"
             aria-label="Colapsar lista de campos"
             matTooltip="Colapsar lista de campos"
             >
-            <mat-icon>chevron_right</mat-icon>
           </button>
           <h4>{{ t('apiFields.heading') }}</h4>
           <small class="available-fields__hint">{{ t('apiFields.hint') }}</small>
@@ -22879,13 +22864,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       }
       @if (paletteCollapsed && availableFields.length) {
         <button
-          mat-icon-button
+          praxisIconButton="chevron_left"
+          size="compact"
           class="collapse-toggle"
           (click)="togglePalette()"
           aria-label="Expandir lista de campos"
           matTooltip="Expandir lista de campos"
           >
-          <mat-icon>chevron_left</mat-icon>
         </button>
       }
       <div class="layout-canvas">
@@ -22947,7 +22932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </div>
       </div>
     </div>
-    `, providers: [providePraxisI18nConfig(LAYOUT_EDITOR_I18N_CONFIG)], styles: [".layout-editor-wrapper{display:flex;flex-wrap:wrap;gap:16px;min-width:0;width:100%}.layout-editor-wrapper.no-available-fields{flex-direction:column;gap:0}.editor-toolbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:16px;align-items:center;min-height:56px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--md-sys-elevation-level1, var(--md-sys-elevation-level1));padding:0 12px;margin:0 0 var(--px-editor-section-gap, 16px) 0;width:100%;box-sizing:border-box;height:auto;white-space:normal}.editor-toolbar .title-block{display:flex;flex-direction:column;justify-content:center;gap:2px}.editor-toolbar .toolbar-title{font:var(--mdc-typography-title-small, 600 15px/20px system-ui);color:var(--md-sys-color-on-surface)}.editor-toolbar .toolbar-subtitle{font:var(--mdc-typography-body-small, 400 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .spacer{flex:1 1 auto}.editor-toolbar .toolbar-group{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.editor-toolbar .gap-group{align-items:center}.editor-toolbar .group-label{font:var(--mdc-typography-label-medium, 500 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .gap-group{align-items:center;gap:10px}.editor-toolbar .density-control{display:flex;align-items:center;gap:8px}.editor-toolbar .density-label{font:var(--mdc-typography-label-medium, 500 12px/16px system-ui);opacity:.9}.editor-toolbar .density-toggle,.editor-toolbar .toggle-icons-group{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;overflow:hidden;background:var(--md-sys-color-surface-container-low)}.editor-toolbar .density-toggle .mat-button-toggle,.editor-toolbar .toggle-icons-group .mat-button-toggle{background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .density-toggle .mat-button-toggle+.mat-button-toggle,.editor-toolbar .toggle-icons-group .mat-button-toggle+.mat-button-toggle{border-left:1px solid var(--md-sys-color-outline-variant)}.editor-toolbar .density-toggle .mat-button-toggle-button,.toggle-icons-group .mat-button-toggle-button{height:32px}.editor-toolbar .density-toggle .mat-icon,.toggle-icons-group .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.editor-toolbar .density-toggle .mat-icon,.editor-toolbar .toggle-icons-group .mat-icon{color:inherit}.gap-chip{display:inline-flex;align-items:center;gap:2px;padding:0 4px;height:32px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-variant)}.gap-chip__btn{width:24px;height:24px;line-height:24px;min-width:0;padding:0;--mdc-icon-button-size: 24px;--mdc-icon-button-state-layer-size: 24px}.gap-chip .mat-mdc-button-touch-target{width:24px;height:24px}.gap-chip mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.gap-chip__input{width:42px;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 600 13px/18px system-ui);text-align:center;outline:none;-moz-appearance:textfield}.gap-chip__input::-webkit-outer-spin-button,.gap-chip__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-chip__suffix{color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font-size:12px}.pill.subtle{background:transparent;color:var(--md-sys-color-on-surface-variant);padding-left:0}.available-fields{width:250px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:10px;background:var(--md-sys-color-surface)}.collapse-toggle{float:right}.available-fields__hint{display:block;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px}.no-fields-chip{position:absolute;top:8px;right:8px;padding:4px 8px;border:1px dashed var(--md-sys-color-outline);border-radius:16px;color:var(--md-sys-color-outline);font-size:12px;background:var(--md-sys-color-surface);pointer-events:none}.layout-canvas{flex-grow:1;flex-basis:100%;min-width:0;width:100%;overflow:visible;max-height:none;position:relative}.field-list{min-height:100px}.section-list{display:flex;flex-direction:column;gap:var(--pfx-section-gap, 20px)}.section-list:empty{min-height:48px}.add-section-container{position:relative;padding-top:16px;margin-top:12px;border-top:1px solid var(--md-sys-color-outline-variant);min-height:28px}.fab-add-section{position:absolute;top:-30px;left:50%;transform:translate(-50%,calc(-50% - var(--pfx-divider-w, 1px)));z-index:2;--pfx-fab-size: var(--pfx-fab-size-section, 32px);--pfx-fab-icon: var(--pfx-fab-icon-section, 18px);width:var(--pfx-fab-size);height:var(--pfx-fab-size);border-radius:50%}.fab-add-section mat-icon{font-size:var(--pfx-fab-icon);width:var(--pfx-fab-icon);height:var(--pfx-fab-icon)}.fab-add-section.mat-mdc-fab{width:var(--pfx-fab-size);height:var(--pfx-fab-size);padding:0}.fab-add-section .mat-mdc-button-touch-target,.fab-add-section .mat-mdc-button-persistent-ripple,.fab-add-section .mat-mdc-button-ripple{width:var(--pfx-fab-size);height:var(--pfx-fab-size)}.cdk-drag-placeholder{opacity:.3;transition:opacity .2s ease}:host ::ng-deep .mdc-text-field--filled{--mdc-filled-text-field-container-color: var(--md-sys-color-surface-container)}:host ::ng-deep .mdc-text-field__input::placeholder{color:var(--md-sys-color-on-surface-variant)!important;opacity:.95}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .mat-mdc-hint{color:var(--md-sys-color-on-surface-variant)!important}:host ::ng-deep .mdc-text-field--disabled .mdc-text-field__input,:host ::ng-deep .mat-mdc-select-disabled .mat-mdc-select-value{color:var(--md-sys-color-on-surface-variant)!important}:host ::ng-deep .mat-button-toggle-checked{background:var(--md-sys-color-primary-container)!important;color:var(--md-sys-color-on-primary-container)!important}:host ::ng-deep .editor-toolbar .mat-button-toggle-appearance-standard{color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .editor-toolbar .mat-button-toggle-appearance-standard:hover{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}:host ::ng-deep .editor-toolbar .mat-button-toggle-checked:hover{background:var(--md-sys-color-primary-container)!important;color:var(--md-sys-color-on-primary-container)!important}:host{--px-editor-section-gap: 16px;--pfx-grid-gap: 12px;--pfx-section-gap: var(--px-editor-section-gap)}@media(min-width:960px){:host{--px-editor-section-gap: 20px;--pfx-grid-gap: 16px}}@media(min-width:1280px){:host{--px-editor-section-gap: 24px;--pfx-grid-gap: 20px}}@media(max-width:700px){.editor-toolbar{position:static;align-items:flex-start;gap:12px;min-height:0;padding:12px;row-gap:12px}.editor-toolbar .spacer{display:none}.editor-toolbar .title-block,.editor-toolbar .toolbar-group{flex:1 1 100%}.editor-toolbar .title-block{gap:4px}.editor-toolbar .toolbar-group{align-items:flex-start;justify-content:flex-start}.editor-toolbar .group-label{flex:0 0 100%}.editor-toolbar .density-toggle,.editor-toolbar .toggle-icons-group{max-width:100%}}\n"] }]
+    `, providers: [providePraxisI18nConfig(LAYOUT_EDITOR_I18N_CONFIG)], styles: [".layout-editor-wrapper{display:flex;flex-wrap:wrap;gap:16px;min-width:0;width:100%}.layout-editor-wrapper.no-available-fields{flex-direction:column;gap:0}.editor-toolbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:16px;align-items:center;min-height:56px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant);box-shadow:var(--md-sys-elevation-level1, var(--md-sys-elevation-level1));padding:0 12px;margin:0 0 var(--px-editor-section-gap, 16px) 0;width:100%;box-sizing:border-box;height:auto;white-space:normal}.editor-toolbar .title-block{display:flex;flex-direction:column;justify-content:center;gap:2px}.editor-toolbar .toolbar-title{font:var(--mdc-typography-title-small, 600 15px/20px system-ui);color:var(--md-sys-color-on-surface)}.editor-toolbar .toolbar-subtitle{font:var(--mdc-typography-body-small, 400 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .spacer{flex:1 1 auto}.editor-toolbar .toolbar-group{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.editor-toolbar .gap-group{align-items:center}.editor-toolbar .group-label{font:var(--mdc-typography-label-medium, 500 12px/16px system-ui);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .gap-group{align-items:center;gap:10px}.editor-toolbar .density-control{display:flex;align-items:center;gap:8px}.editor-toolbar .density-label{font:var(--mdc-typography-label-medium, 500 12px/16px system-ui);opacity:.9}.editor-toolbar .density-toggle,.editor-toolbar .toggle-icons-group{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;overflow:hidden;background:var(--md-sys-color-surface-container-low)}.editor-toolbar .density-toggle .mat-button-toggle,.editor-toolbar .toggle-icons-group .mat-button-toggle{background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant)}.editor-toolbar .density-toggle .mat-button-toggle+.mat-button-toggle,.editor-toolbar .toggle-icons-group .mat-button-toggle+.mat-button-toggle{border-left:1px solid var(--md-sys-color-outline-variant)}.editor-toolbar .density-toggle .mat-button-toggle-button,.toggle-icons-group .mat-button-toggle-button{height:32px}.editor-toolbar .density-toggle .mat-icon,.toggle-icons-group .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.editor-toolbar .density-toggle .mat-icon,.editor-toolbar .toggle-icons-group .mat-icon{color:inherit}.gap-chip{display:inline-flex;align-items:center;gap:2px;padding:0 4px;min-height:40px;border-radius:8px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-variant)}.gap-chip__input{width:42px;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--mdc-typography-body-medium, 600 13px/18px system-ui);text-align:center;outline:none;-moz-appearance:textfield}.gap-chip__input::-webkit-outer-spin-button,.gap-chip__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-chip__suffix{color:var(--md-sys-color-on-surface-variant);font:var(--mdc-typography-label-medium, 500 12px/16px system-ui)}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font-size:12px}.pill.subtle{background:transparent;color:var(--md-sys-color-on-surface-variant);padding-left:0}.available-fields{width:250px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;padding:10px;background:var(--md-sys-color-surface)}.collapse-toggle{float:right}.available-fields__hint{display:block;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px}.no-fields-chip{position:absolute;top:8px;right:8px;padding:4px 8px;border:1px dashed var(--md-sys-color-outline);border-radius:16px;color:var(--md-sys-color-outline);font-size:12px;background:var(--md-sys-color-surface);pointer-events:none}.layout-canvas{flex-grow:1;flex-basis:100%;min-width:0;width:100%;overflow:visible;max-height:none;position:relative}.field-list{min-height:100px}.section-list{display:flex;flex-direction:column;gap:var(--pfx-section-gap, 20px)}.section-list:empty{min-height:48px}.add-section-container{position:relative;padding-top:16px;margin-top:12px;border-top:1px solid var(--md-sys-color-outline-variant);min-height:28px}.fab-add-section{position:absolute;top:-30px;left:50%;transform:translate(-50%,calc(-50% - var(--pfx-divider-w, 1px)));z-index:2;--pfx-fab-size: var(--pfx-fab-size-section, 32px);--pfx-fab-icon: var(--pfx-fab-icon-section, 18px);width:var(--pfx-fab-size);height:var(--pfx-fab-size);border-radius:50%}.fab-add-section mat-icon{font-size:var(--pfx-fab-icon);width:var(--pfx-fab-icon);height:var(--pfx-fab-icon)}.fab-add-section.mat-mdc-fab{width:var(--pfx-fab-size);height:var(--pfx-fab-size);padding:0}.fab-add-section .mat-mdc-button-touch-target,.fab-add-section .mat-mdc-button-persistent-ripple,.fab-add-section .mat-mdc-button-ripple{width:var(--pfx-fab-size);height:var(--pfx-fab-size)}.cdk-drag-placeholder{opacity:.3;transition:opacity .2s ease}:host ::ng-deep .mdc-text-field--filled{--mdc-filled-text-field-container-color: var(--md-sys-color-surface-container)}:host ::ng-deep .mdc-text-field__input::placeholder{color:var(--md-sys-color-on-surface-variant)!important;opacity:.95}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .mat-mdc-hint{color:var(--md-sys-color-on-surface-variant)!important}:host ::ng-deep .mdc-text-field--disabled .mdc-text-field__input,:host ::ng-deep .mat-mdc-select-disabled .mat-mdc-select-value{color:var(--md-sys-color-on-surface-variant)!important}:host ::ng-deep .mat-button-toggle-checked{background:var(--md-sys-color-primary-container)!important;color:var(--md-sys-color-on-primary-container)!important}:host ::ng-deep .editor-toolbar .mat-button-toggle-appearance-standard{color:var(--md-sys-color-on-surface-variant)}:host ::ng-deep .editor-toolbar .mat-button-toggle-appearance-standard:hover{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}:host ::ng-deep .editor-toolbar .mat-button-toggle-checked:hover{background:var(--md-sys-color-primary-container)!important;color:var(--md-sys-color-on-primary-container)!important}:host{--px-editor-section-gap: 16px;--pfx-grid-gap: 12px;--pfx-section-gap: var(--px-editor-section-gap)}@media(min-width:960px){:host{--px-editor-section-gap: 20px;--pfx-grid-gap: 16px}}@media(min-width:1280px){:host{--px-editor-section-gap: 24px;--pfx-grid-gap: 20px}}@media(max-width:700px){.editor-toolbar{position:static;align-items:flex-start;gap:12px;min-height:0;padding:12px;row-gap:12px}.editor-toolbar .spacer{display:none}.editor-toolbar .title-block,.editor-toolbar .toolbar-group{flex:1 1 100%}.editor-toolbar .title-block{gap:4px}.editor-toolbar .toolbar-group{align-items:flex-start;justify-content:flex-start}.editor-toolbar .group-label{flex:0 0 100%}.editor-toolbar .density-toggle,.editor-toolbar .toggle-icons-group{max-width:100%}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], configChange: [{
@@ -24290,13 +24275,13 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     {{ field.label }}
                     @if (field.hint) {
                       <button
-                        mat-icon-button
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="field.hint"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="field.hint"
+                      ></button>
                     }
                   </mat-slide-toggle>
                 } @else if (field.type === 'textarea') {
@@ -24313,14 +24298,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     ></textarea>
                     @if (field.hint) {
                       <button
-                        mat-icon-button
                         matSuffix
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="field.hint"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="field.hint"
+                      ></button>
                     }
                     @if (isGlobalActionFieldMissing(action, field)) {
                       <mat-error aria-live="polite">{{ tx('global.validation.requiredField', 'Campo obrigatório.') }}</mat-error>
@@ -24339,14 +24324,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                       [required]="isGlobalActionFieldRequired(action, field)"
                     ></textarea>
                     <button
-                      mat-icon-button
                       matSuffix
                       type="button"
+                      [praxisIconButton]="'help_outline'"
+                      size="dense"
                       class="help-icon-button"
                       [matTooltip]="tx('global.validation.validJson', 'Provide valid JSON.')"
-                    >
-                      <mat-icon>help_outline</mat-icon>
-                    </button>
+                      [attr.aria-label]="tx('global.validation.validJson', 'Provide valid JSON.')"
+                    ></button>
                     @if (hasActionFieldError(action, field.key)) {
                       <mat-error>{{ getActionFieldError(action, field.key) }}</mat-error>
                     } @else if (isGlobalActionFieldMissing(action, field)) {
@@ -24368,14 +24353,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     </mat-select>
                     @if (field.hint) {
                       <button
-                        mat-icon-button
                         matSuffix
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="field.hint"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="field.hint"
+                      ></button>
                     }
                     @if (isGlobalActionFieldMissing(action, field)) {
                       <mat-error aria-live="polite">{{ tx('global.validation.requiredField', 'Campo obrigatório.') }}</mat-error>
@@ -24395,14 +24380,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     />
                     @if (field.hint) {
                       <button
-                        mat-icon-button
                         matSuffix
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="field.hint"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="field.hint"
+                      ></button>
                     }
                     @if (isGlobalActionFieldMissing(action, field)) {
                       <mat-error aria-live="polite">{{ tx('global.validation.requiredField', 'Campo obrigatório.') }}</mat-error>
@@ -24688,25 +24673,23 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                 <div class="custom-action-panel-toolbar">
                   <div class="custom-action-order-controls">
                     <button
-                      mat-icon-button
                       type="button"
+                      [praxisIconButton]="'arrow_upward'"
+                      size="dense"
                       [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>
                     <button
-                      mat-icon-button
                       type="button"
+                      [praxisIconButton]="'arrow_downward'"
+                      size="dense"
                       [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>
+                    ></button>
                   </div>
                 </div>
                 <mat-expansion-panel>
@@ -24749,14 +24732,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                         </mat-optgroup>
                       </mat-select>
                       <button
-                        mat-icon-button
                         matSuffix
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="tx('custom.action.help', 'Global actions require an app-side executor (ActionResolver). Custom actions only emit events. Color and position affect the button.')"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="tx('custom.action.help', 'Global actions require an app-side executor (ActionResolver). Custom actions only emit events. Color and position affect the button.')"
+                      ></button>
                     </mat-form-field>
                     @if (getCustomActionSelectValue(customAction) === customActionValue) {
                       <mat-form-field>
@@ -24937,13 +24920,14 @@ let ActionsEditorComponent$1 = class ActionsEditorComponent {
                     </mat-form-field>
                   </div>
                   <button
-                    mat-icon-button
-                    color="warn"
+                    type="button"
+                    [praxisIconButton]="'delete'"
+                    size="dense"
+                    class="editor-icon-action--danger"
                     (click)="removeCustomButton(i)"
                     [matTooltip]="tx('custom.remove', 'Remove this button')"
-                  >
-                    <mat-icon>delete</mat-icon>
-                  </button>
+                    [attr.aria-label]="tx('custom.remove', 'Remove this button')"
+                  ></button>
                 </ng-template>
               </mat-expansion-panel>
               </div>
@@ -25063,7 +25047,7 @@ 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-field-error{color:var(--md-sys-color-error, #ba1a1a);font-weight:500}.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$2.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i5$2.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$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.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: i8$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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"] }] });
+  `, 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{vertical-align:middle}.editor-icon-action--danger{color:var(--md-sys-color-error, #ba1a1a)}.action-field-error{color:var(--md-sys-color-error, #ba1a1a);font-weight:500}.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$2.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i5$2.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$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.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: i8$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }] });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ActionsEditorComponent$1, decorators: [{
             type: Component,
@@ -25082,6 +25066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatIconModule,
                         MatButtonModule,
                         MatTooltipModule,
+                        PraxisIconButtonComponent,
                         SurfaceOpenActionEditorComponent,
                     ], template: `
     <ng-template #globalActionFields let-action let-index="index">
@@ -25113,13 +25098,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     {{ field.label }}
                     @if (field.hint) {
                       <button
-                        mat-icon-button
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="field.hint"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="field.hint"
+                      ></button>
                     }
                   </mat-slide-toggle>
                 } @else if (field.type === 'textarea') {
@@ -25136,14 +25121,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     ></textarea>
                     @if (field.hint) {
                       <button
-                        mat-icon-button
                         matSuffix
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="field.hint"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="field.hint"
+                      ></button>
                     }
                     @if (isGlobalActionFieldMissing(action, field)) {
                       <mat-error aria-live="polite">{{ tx('global.validation.requiredField', 'Campo obrigatório.') }}</mat-error>
@@ -25162,14 +25147,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       [required]="isGlobalActionFieldRequired(action, field)"
                     ></textarea>
                     <button
-                      mat-icon-button
                       matSuffix
                       type="button"
+                      [praxisIconButton]="'help_outline'"
+                      size="dense"
                       class="help-icon-button"
                       [matTooltip]="tx('global.validation.validJson', 'Provide valid JSON.')"
-                    >
-                      <mat-icon>help_outline</mat-icon>
-                    </button>
+                      [attr.aria-label]="tx('global.validation.validJson', 'Provide valid JSON.')"
+                    ></button>
                     @if (hasActionFieldError(action, field.key)) {
                       <mat-error>{{ getActionFieldError(action, field.key) }}</mat-error>
                     } @else if (isGlobalActionFieldMissing(action, field)) {
@@ -25191,14 +25176,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     </mat-select>
                     @if (field.hint) {
                       <button
-                        mat-icon-button
                         matSuffix
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="field.hint"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="field.hint"
+                      ></button>
                     }
                     @if (isGlobalActionFieldMissing(action, field)) {
                       <mat-error aria-live="polite">{{ tx('global.validation.requiredField', 'Campo obrigatório.') }}</mat-error>
@@ -25218,14 +25203,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     />
                     @if (field.hint) {
                       <button
-                        mat-icon-button
                         matSuffix
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="field.hint"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="field.hint"
+                      ></button>
                     }
                     @if (isGlobalActionFieldMissing(action, field)) {
                       <mat-error aria-live="polite">{{ tx('global.validation.requiredField', 'Campo obrigatório.') }}</mat-error>
@@ -25511,25 +25496,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 <div class="custom-action-panel-toolbar">
                   <div class="custom-action-order-controls">
                     <button
-                      mat-icon-button
                       type="button"
+                      [praxisIconButton]="'arrow_upward'"
+                      size="dense"
                       [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>
                     <button
-                      mat-icon-button
                       type="button"
+                      [praxisIconButton]="'arrow_downward'"
+                      size="dense"
                       [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>
+                    ></button>
                   </div>
                 </div>
                 <mat-expansion-panel>
@@ -25572,14 +25555,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         </mat-optgroup>
                       </mat-select>
                       <button
-                        mat-icon-button
                         matSuffix
                         type="button"
+                        [praxisIconButton]="'help_outline'"
+                        size="dense"
                         class="help-icon-button"
                         [matTooltip]="tx('custom.action.help', 'Global actions require an app-side executor (ActionResolver). Custom actions only emit events. Color and position affect the button.')"
-                      >
-                        <mat-icon>help_outline</mat-icon>
-                      </button>
+                        [attr.aria-label]="tx('custom.action.help', 'Global actions require an app-side executor (ActionResolver). Custom actions only emit events. Color and position affect the button.')"
+                      ></button>
                     </mat-form-field>
                     @if (getCustomActionSelectValue(customAction) === customActionValue) {
                       <mat-form-field>
@@ -25760,13 +25743,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     </mat-form-field>
                   </div>
                   <button
-                    mat-icon-button
-                    color="warn"
+                    type="button"
+                    [praxisIconButton]="'delete'"
+                    size="dense"
+                    class="editor-icon-action--danger"
                     (click)="removeCustomButton(i)"
                     [matTooltip]="tx('custom.remove', 'Remove this button')"
-                  >
-                    <mat-icon>delete</mat-icon>
-                  </button>
+                    [attr.aria-label]="tx('custom.remove', 'Remove this button')"
+                  ></button>
                 </ng-template>
               </mat-expansion-panel>
               </div>
@@ -25886,7 +25870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", 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-field-error{color:var(--md-sys-color-error, #ba1a1a);font-weight:500}.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"] }]
+  `, 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{vertical-align:middle}.editor-icon-action--danger{color:var(--md-sys-color-error, #ba1a1a)}.action-field-error{color:var(--md-sys-color-error, #ba1a1a);font-weight:500}.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: [{
@@ -26534,17 +26518,13 @@ class HooksEditorComponent {
                         <input matInput type="number" [(ngModel)]="h.timeoutMs" (ngModelChange)="touch()" />
                       </mat-form-field>
                       <mat-slide-toggle [(ngModel)]="h.enabled" (ngModelChange)="touch()">Ativo</mat-slide-toggle>
-                      <button mat-icon-button color="warn" (click)="remove(st, i)" matTooltip="Remover">
-                        <mat-icon>delete</mat-icon>
+                      <button praxisIconButton="delete" size="dense" class="danger-action" (click)="remove(st, i)" matTooltip="Remover">
                       </button>
-                      <button mat-icon-button (click)="reorder(st, i, -1)" [disabled]="i===0" matTooltip="Mover para cima">
-                        <mat-icon>arrow_upward</mat-icon>
+                      <button praxisIconButton="arrow_upward" size="dense" (click)="reorder(st, i, -1)" [disabled]="i===0" matTooltip="Mover para cima">
                       </button>
-                      <button mat-icon-button (click)="reorder(st, i, +1)" [disabled]="i===model.hooks[st].length-1" matTooltip="Mover para baixo">
-                        <mat-icon>arrow_downward</mat-icon>
+                      <button praxisIconButton="arrow_downward" size="dense" (click)="reorder(st, i, +1)" [disabled]="i===model.hooks[st].length-1" matTooltip="Mover para baixo">
                       </button>
-                      <button mat-icon-button (click)="duplicate(st, i)" matTooltip="Duplicar">
-                        <mat-icon>content_copy</mat-icon>
+                      <button praxisIconButton="content_copy" size="dense" (click)="duplicate(st, i)" matTooltip="Duplicar">
                       </button>
                     </div>
                     <mat-form-field appearance="outline" class="args-field">
@@ -26588,11 +26568,11 @@ class HooksEditorComponent {
         }
       </mat-accordion>
     </div>
-    `, isInline: true, styles: [".hooks-editor{display:block}.hook-item{padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:12px}.row{display:flex;gap:12px;align-items:center}.grow{flex:1}.w120{width:120px}.w140{width:140px}.w220{width:220px}.args-field{width:100%}.panel-actions{display:flex;gap:12px;margin-top:8px}.quick-add{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}.empty{opacity:.7;font-style:italic;padding:8px 0}.move-row{margin-top:8px}\n"], dependencies: [{ 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i8$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i5$2.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$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [".hooks-editor{display:block}.hook-item{padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:12px}.row{display:flex;gap:12px;align-items:center}.grow{flex:1}.w120{width:120px}.w140{width:140px}.w220{width:220px}.args-field{width:100%}.panel-actions{display:flex;gap:12px;margin-top:8px}.quick-add{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}.empty{opacity:.7;font-style:italic;padding:8px 0}.move-row{margin-top:8px}.danger-action{color:var(--md-sys-color-error)}\n"], dependencies: [{ 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i8$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i5$2.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$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HooksEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-hooks-editor', standalone: true, imports: [FormsModule, MatExpansionModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatSlideToggleModule, MatSelectModule, MatTooltipModule], template: `
+            args: [{ selector: 'praxis-hooks-editor', standalone: true, imports: [FormsModule, MatExpansionModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatSlideToggleModule, MatSelectModule, MatTooltipModule, PraxisIconButtonComponent], template: `
     <div class="hooks-editor">
       <mat-accordion multi>
         @for (st of stages; track st) {
@@ -26632,17 +26612,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         <input matInput type="number" [(ngModel)]="h.timeoutMs" (ngModelChange)="touch()" />
                       </mat-form-field>
                       <mat-slide-toggle [(ngModel)]="h.enabled" (ngModelChange)="touch()">Ativo</mat-slide-toggle>
-                      <button mat-icon-button color="warn" (click)="remove(st, i)" matTooltip="Remover">
-                        <mat-icon>delete</mat-icon>
+                      <button praxisIconButton="delete" size="dense" class="danger-action" (click)="remove(st, i)" matTooltip="Remover">
                       </button>
-                      <button mat-icon-button (click)="reorder(st, i, -1)" [disabled]="i===0" matTooltip="Mover para cima">
-                        <mat-icon>arrow_upward</mat-icon>
+                      <button praxisIconButton="arrow_upward" size="dense" (click)="reorder(st, i, -1)" [disabled]="i===0" matTooltip="Mover para cima">
                       </button>
-                      <button mat-icon-button (click)="reorder(st, i, +1)" [disabled]="i===model.hooks[st].length-1" matTooltip="Mover para baixo">
-                        <mat-icon>arrow_downward</mat-icon>
+                      <button praxisIconButton="arrow_downward" size="dense" (click)="reorder(st, i, +1)" [disabled]="i===model.hooks[st].length-1" matTooltip="Mover para baixo">
                       </button>
-                      <button mat-icon-button (click)="duplicate(st, i)" matTooltip="Duplicar">
-                        <mat-icon>content_copy</mat-icon>
+                      <button praxisIconButton="content_copy" size="dense" (click)="duplicate(st, i)" matTooltip="Duplicar">
                       </button>
                     </div>
                     <mat-form-field appearance="outline" class="args-field">
@@ -26686,7 +26662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }
       </mat-accordion>
     </div>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".hooks-editor{display:block}.hook-item{padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:12px}.row{display:flex;gap:12px;align-items:center}.grow{flex:1}.w120{width:120px}.w140{width:140px}.w220{width:220px}.args-field{width:100%}.panel-actions{display:flex;gap:12px;margin-top:8px}.quick-add{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}.empty{opacity:.7;font-style:italic;padding:8px 0}.move-row{margin-top:8px}\n"] }]
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".hooks-editor{display:block}.hook-item{padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:12px}.row{display:flex;gap:12px;align-items:center}.grow{flex:1}.w120{width:120px}.w140{width:140px}.w220{width:220px}.args-field{width:100%}.panel-actions{display:flex;gap:12px;margin-top:8px}.quick-add{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}.empty{opacity:.7;font-style:italic;padding:8px 0}.move-row{margin-top:8px}.danger-action{color:var(--md-sys-color-error)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], configChange: [{
@@ -27583,8 +27559,7 @@ class RulePropertiesPanelComponent {
                       <input matInput [(ngModel)]="item.value" />
                     </mat-form-field>
                     <mat-slide-toggle [(ngModel)]="item.disabled">{{ t('rules.property.options.disabled', 'Desabilitada') }}</mat-slide-toggle>
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.options.remove', 'Remover opção')" (click)="removeOptionItem($index, true)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.options.remove', 'Remover opção')" (click)="removeOptionItem($index, true)">
                     </button>
                   </div>
                 }
@@ -27606,8 +27581,7 @@ class RulePropertiesPanelComponent {
                       <input matInput [(ngModel)]="item.value" />
                     </mat-form-field>
                     <mat-slide-toggle [(ngModel)]="item.disabled">{{ t('rules.property.options.disabled', 'Desabilitada') }}</mat-slide-toggle>
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.options.remove', 'Remover opção')" (click)="removeOptionItem($index, false)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.options.remove', 'Remover opção')" (click)="removeOptionItem($index, false)">
                     </button>
                   </div>
                 }
@@ -27648,8 +27622,7 @@ class RulePropertiesPanelComponent {
                     @if (item.valueType === 'boolean') {
                       <mat-slide-toggle [(ngModel)]="item.boolValue">{{ t('rules.property.validators.active', 'Ativo') }}</mat-slide-toggle>
                     }
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.validators.remove', 'Remover validador')" (click)="removeValidatorItem($index, true)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.validators.remove', 'Remover validador')" (click)="removeValidatorItem($index, true)">
                     </button>
                   </div>
                 }
@@ -27688,8 +27661,7 @@ class RulePropertiesPanelComponent {
                     @if (item.valueType === 'boolean') {
                       <mat-slide-toggle [(ngModel)]="item.boolValue">{{ t('rules.property.validators.active', 'Ativo') }}</mat-slide-toggle>
                     }
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.validators.remove', 'Remover validador')" (click)="removeValidatorItem($index, false)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.validators.remove', 'Remover validador')" (click)="removeValidatorItem($index, false)">
                     </button>
                   </div>
                 }
@@ -27763,8 +27735,7 @@ class RulePropertiesPanelComponent {
                       <mat-label>{{ t('rules.property.common.value', 'Valor') }}</mat-label>
                       <input matInput [(ngModel)]="item.value" [type]="item.valueType === 'number' ? 'number' : 'text'" />
                     </mat-form-field>
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.style.remove', 'Remover estilo')" (click)="removeStyleItem($index, true)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.style.remove', 'Remover estilo')" (click)="removeStyleItem($index, true)">
                     </button>
                   </div>
                 }
@@ -27792,8 +27763,7 @@ class RulePropertiesPanelComponent {
                       <mat-label>{{ t('rules.property.common.value', 'Valor') }}</mat-label>
                       <input matInput [(ngModel)]="item.value" [type]="item.valueType === 'number' ? 'number' : 'text'" />
                     </mat-form-field>
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.style.remove', 'Remover estilo')" (click)="removeStyleItem($index, false)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.style.remove', 'Remover estilo')" (click)="removeStyleItem($index, false)">
                     </button>
                   </div>
                 }
@@ -27939,26 +27909,26 @@ class RulePropertiesPanelComponent {
               <div class="preview-label">
                 <span>{{ t('config.ruleProperties.preview.activeEffect', 'Efeito aplicado neste preview') }}</span>
                 <button
-                  mat-icon-button
+                  praxisIconButton="help_outline"
+                  size="dense"
                   class="help-icon-button"
                   type="button"
                   [matTooltip]="t('config.ruleProperties.preview.activeEffectTooltip', 'Propriedades que seriam aplicadas no runtime para os dados de exemplo.')"
                   matTooltipPosition="above"
                   >
-                  <mat-icon>help_outline</mat-icon>
                 </button>
               </div>
               <pre>{{ rulePreview.activeProperties | json }}</pre>
               <div class="preview-label">
                 <span>{{ t('config.ruleProperties.preview.inactiveEffect', 'Outro ramo') }}</span>
                 <button
-                  mat-icon-button
+                  praxisIconButton="help_outline"
+                  size="dense"
                   class="help-icon-button"
                   type="button"
                   [matTooltip]="t('config.ruleProperties.preview.inactiveEffectTooltip', 'Propriedades que seriam aplicadas se a condição mudasse para o outro resultado.')"
                   matTooltipPosition="above"
                   >
-                  <mat-icon>help_outline</mat-icon>
                 </button>
               </div>
               <pre>{{ rulePreview.inactiveProperties | json }}</pre>
@@ -27967,7 +27937,7 @@ class RulePropertiesPanelComponent {
         </div>
       </mat-card-content>
     </mat-card>
-    `, isInline: true, styles: [":host{display:block;min-width:0}.rule-props-card{margin-top:16px;min-width:0;overflow:visible;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface-container-low);box-shadow:none}.rule-props-header{padding:16px 18px 10px}.rule-props-avatar{display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 42%,transparent)}.rule-props-card mat-card-content{display:grid;gap:14px;min-width:0;padding:0 18px 18px}.rule-context{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,var(--md-sys-color-outline-variant));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 16%,var(--md-sys-color-surface-container) 84%);min-width:0}.rule-context__main{display:grid;gap:3px;min-width:0}.rule-context__main strong{overflow:hidden;color:var(--md-sys-color-on-surface);font-size:15px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.rule-context__main span:last-child{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.rule-context__eyebrow{color:var(--md-sys-color-primary);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.rule-context__meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}.rule-context__chip{display:inline-flex;align-items:center;min-height:24px;max-width:180px;padding:3px 9px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.rule-context__chip--warn{border-color:color-mix(in srgb,var(--md-sys-color-tertiary, var(--md-sys-color-primary)) 42%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.rule-props-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;min-width:0}.rule-editor-section{display:grid;gap:8px;min-width:0}.rule-editor-section--selector{padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.rule-editor-section__title{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:700}.rule-editor-section__title span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font-size:11px}.property-workbench{grid-column:1 / -1;display:grid;gap:6px;min-width:0;padding-top:2px}.property-workbench__summary{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.4}.value-row{grid-column:1 / -1;display:grid;grid-template-columns:minmax(min(210px,100%),.45fr) minmax(min(260px,100%),1fr);align-items:start;gap:12px;min-width:0;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.value-label{padding-top:16px;color:var(--md-sys-color-on-surface-variant);font-weight:600;line-height:1.35}.options-editor{grid-column:1 / -1;display:grid;gap:10px;width:100%;min-width:0;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.options-editor__title{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:600}.option-row{display:grid;grid-template-columns:minmax(min(160px,100%),1fr) minmax(min(160px,100%),1fr) auto auto;gap:10px;align-items:center;min-width:0}.validator-row{display:grid;grid-template-columns:minmax(min(150px,100%),1fr) minmax(min(120px,100%),.7fr) minmax(min(150px,100%),1fr) auto auto;gap:10px;align-items:center;min-width:0}.breakpoint-row{display:grid;grid-template-columns:56px minmax(min(160px,100%),1fr);gap:10px;align-items:center;min-width:0}.style-row{display:grid;grid-template-columns:minmax(min(220px,100%),1.1fr) minmax(min(120px,100%),.45fr) minmax(min(220px,100%),1fr) auto;gap:10px;align-items:start;min-width:0}.breakpoint-label{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:700;text-transform:uppercase}.visual-block-rule-note{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 32%,var(--md-sys-color-outline-variant));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 28%,var(--md-sys-color-surface) 72%);color:var(--md-sys-color-on-surface);font-size:13px;line-height:1.45}.visual-block-rule-note mat-icon{width:18px;height:18px;font-size:18px;color:var(--md-sys-color-primary)}.visual-block-node-select{grid-column:1 / -1}.actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.actions__hint{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.preview{grid-column:1 / -1;background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);padding:12px;border-radius:8px}.preview-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.preview-header h4{margin:0 0 4px}.preview-header p{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.4}.preview-state{flex:0 0 auto;min-width:96px;padding:6px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface);font-size:12px;font-weight:600;text-align:center}.preview-state--active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 42%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 36%,var(--md-sys-color-surface) 64%)}.preview-state--false{border-color:color-mix(in srgb,var(--md-sys-color-tertiary, var(--md-sys-color-primary)) 34%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.preview-state--invalid{border-color:var(--md-sys-color-error);color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 36%,var(--md-sys-color-surface) 64%)}.preview-sample-field{width:100%}.preview-error{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin:4px 0 10px;color:var(--md-sys-color-error);font-size:13px}.preview-error mat-icon{width:18px;height:18px;font-size:18px}.preview-label{display:inline-flex;align-items:center;gap:8px;margin:4px 0;color:var(--md-sys-color-on-surface-variant);font-size: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}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}@media(max-width:720px){.rule-context{grid-template-columns:1fr}.rule-context__meta{justify-content:flex-start}.rule-props-grid,.value-row,.option-row,.validator-row,.breakpoint-row,.style-row{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i5$2.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: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i7$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }] });
+    `, isInline: true, styles: [":host{display:block;min-width:0}.rule-props-card{margin-top:16px;min-width:0;overflow:visible;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface-container-low);box-shadow:none}.rule-props-header{padding:16px 18px 10px}.rule-props-avatar{display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 42%,transparent)}.rule-props-card mat-card-content{display:grid;gap:14px;min-width:0;padding:0 18px 18px}.rule-context{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,var(--md-sys-color-outline-variant));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 16%,var(--md-sys-color-surface-container) 84%);min-width:0}.rule-context__main{display:grid;gap:3px;min-width:0}.rule-context__main strong{overflow:hidden;color:var(--md-sys-color-on-surface);font-size:15px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.rule-context__main span:last-child{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.rule-context__eyebrow{color:var(--md-sys-color-primary);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.rule-context__meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}.rule-context__chip{display:inline-flex;align-items:center;min-height:24px;max-width:180px;padding:3px 9px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.rule-context__chip--warn{border-color:color-mix(in srgb,var(--md-sys-color-tertiary, var(--md-sys-color-primary)) 42%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.rule-props-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;min-width:0}.rule-editor-section{display:grid;gap:8px;min-width:0}.rule-editor-section--selector{padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.rule-editor-section__title{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:700}.rule-editor-section__title span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font-size:11px}.property-workbench{grid-column:1 / -1;display:grid;gap:6px;min-width:0;padding-top:2px}.property-workbench__summary{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.4}.value-row{grid-column:1 / -1;display:grid;grid-template-columns:minmax(min(210px,100%),.45fr) minmax(min(260px,100%),1fr);align-items:start;gap:12px;min-width:0;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.value-label{padding-top:16px;color:var(--md-sys-color-on-surface-variant);font-weight:600;line-height:1.35}.options-editor{grid-column:1 / -1;display:grid;gap:10px;width:100%;min-width:0;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.options-editor__title{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:600}.option-row{display:grid;grid-template-columns:minmax(min(160px,100%),1fr) minmax(min(160px,100%),1fr) auto auto;gap:10px;align-items:center;min-width:0}.validator-row{display:grid;grid-template-columns:minmax(min(150px,100%),1fr) minmax(min(120px,100%),.7fr) minmax(min(150px,100%),1fr) auto auto;gap:10px;align-items:center;min-width:0}.breakpoint-row{display:grid;grid-template-columns:56px minmax(min(160px,100%),1fr);gap:10px;align-items:center;min-width:0}.style-row{display:grid;grid-template-columns:minmax(min(220px,100%),1.1fr) minmax(min(120px,100%),.45fr) minmax(min(220px,100%),1fr) auto;gap:10px;align-items:start;min-width:0}.breakpoint-label{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:700;text-transform:uppercase}.visual-block-rule-note{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 32%,var(--md-sys-color-outline-variant));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 28%,var(--md-sys-color-surface) 72%);color:var(--md-sys-color-on-surface);font-size:13px;line-height:1.45}.visual-block-rule-note mat-icon{width:18px;height:18px;font-size:18px;color:var(--md-sys-color-primary)}.visual-block-node-select{grid-column:1 / -1}.actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.actions__hint{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.preview{grid-column:1 / -1;background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);padding:12px;border-radius:8px}.preview-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.preview-header h4{margin:0 0 4px}.preview-header p{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.4}.preview-state{flex:0 0 auto;min-width:96px;padding:6px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface);font-size:12px;font-weight:600;text-align:center}.preview-state--active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 42%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 36%,var(--md-sys-color-surface) 64%)}.preview-state--false{border-color:color-mix(in srgb,var(--md-sys-color-tertiary, var(--md-sys-color-primary)) 34%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.preview-state--invalid{border-color:var(--md-sys-color-error);color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 36%,var(--md-sys-color-surface) 64%)}.preview-sample-field{width:100%}.preview-error{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin:4px 0 10px;color:var(--md-sys-color-error);font-size:13px}.preview-error mat-icon{width:18px;height:18px;font-size:18px}.preview-label{display:inline-flex;align-items:center;gap:8px;margin:4px 0;color:var(--md-sys-color-on-surface-variant);font-size:12px}.danger-action{color:var(--md-sys-color-error)}@media(max-width:720px){.rule-context{grid-template-columns:1fr}.rule-context__meta{justify-content:flex-start}.rule-props-grid,.value-row,.option-row,.validator-row,.breakpoint-row,.style-row{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i5$2.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: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i7$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RulePropertiesPanelComponent, decorators: [{
             type: Component,
@@ -27983,6 +27953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatListModule,
                         MatIconModule,
                         MatTooltipModule,
+                        PraxisIconButtonComponent,
                     ], template: `
     <mat-card class="rule-props-card">
       <mat-card-header class="rule-props-header">
@@ -28091,8 +28062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <input matInput [(ngModel)]="item.value" />
                     </mat-form-field>
                     <mat-slide-toggle [(ngModel)]="item.disabled">{{ t('rules.property.options.disabled', 'Desabilitada') }}</mat-slide-toggle>
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.options.remove', 'Remover opção')" (click)="removeOptionItem($index, true)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.options.remove', 'Remover opção')" (click)="removeOptionItem($index, true)">
                     </button>
                   </div>
                 }
@@ -28114,8 +28084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <input matInput [(ngModel)]="item.value" />
                     </mat-form-field>
                     <mat-slide-toggle [(ngModel)]="item.disabled">{{ t('rules.property.options.disabled', 'Desabilitada') }}</mat-slide-toggle>
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.options.remove', 'Remover opção')" (click)="removeOptionItem($index, false)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.options.remove', 'Remover opção')" (click)="removeOptionItem($index, false)">
                     </button>
                   </div>
                 }
@@ -28156,8 +28125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     @if (item.valueType === 'boolean') {
                       <mat-slide-toggle [(ngModel)]="item.boolValue">{{ t('rules.property.validators.active', 'Ativo') }}</mat-slide-toggle>
                     }
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.validators.remove', 'Remover validador')" (click)="removeValidatorItem($index, true)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.validators.remove', 'Remover validador')" (click)="removeValidatorItem($index, true)">
                     </button>
                   </div>
                 }
@@ -28196,8 +28164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     @if (item.valueType === 'boolean') {
                       <mat-slide-toggle [(ngModel)]="item.boolValue">{{ t('rules.property.validators.active', 'Ativo') }}</mat-slide-toggle>
                     }
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.validators.remove', 'Remover validador')" (click)="removeValidatorItem($index, false)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.validators.remove', 'Remover validador')" (click)="removeValidatorItem($index, false)">
                     </button>
                   </div>
                 }
@@ -28271,8 +28238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <mat-label>{{ t('rules.property.common.value', 'Valor') }}</mat-label>
                       <input matInput [(ngModel)]="item.value" [type]="item.valueType === 'number' ? 'number' : 'text'" />
                     </mat-form-field>
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.style.remove', 'Remover estilo')" (click)="removeStyleItem($index, true)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.style.remove', 'Remover estilo')" (click)="removeStyleItem($index, true)">
                     </button>
                   </div>
                 }
@@ -28300,8 +28266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <mat-label>{{ t('rules.property.common.value', 'Valor') }}</mat-label>
                       <input matInput [(ngModel)]="item.value" [type]="item.valueType === 'number' ? 'number' : 'text'" />
                     </mat-form-field>
-                    <button mat-icon-button type="button" [matTooltip]="t('rules.property.style.remove', 'Remover estilo')" (click)="removeStyleItem($index, false)">
-                      <mat-icon aria-hidden="true">delete</mat-icon>
+                    <button praxisIconButton="delete" size="dense" class="danger-action" type="button" [matTooltip]="t('rules.property.style.remove', 'Remover estilo')" (click)="removeStyleItem($index, false)">
                     </button>
                   </div>
                 }
@@ -28447,26 +28412,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <div class="preview-label">
                 <span>{{ t('config.ruleProperties.preview.activeEffect', 'Efeito aplicado neste preview') }}</span>
                 <button
-                  mat-icon-button
+                  praxisIconButton="help_outline"
+                  size="dense"
                   class="help-icon-button"
                   type="button"
                   [matTooltip]="t('config.ruleProperties.preview.activeEffectTooltip', 'Propriedades que seriam aplicadas no runtime para os dados de exemplo.')"
                   matTooltipPosition="above"
                   >
-                  <mat-icon>help_outline</mat-icon>
                 </button>
               </div>
               <pre>{{ rulePreview.activeProperties | json }}</pre>
               <div class="preview-label">
                 <span>{{ t('config.ruleProperties.preview.inactiveEffect', 'Outro ramo') }}</span>
                 <button
-                  mat-icon-button
+                  praxisIconButton="help_outline"
+                  size="dense"
                   class="help-icon-button"
                   type="button"
                   [matTooltip]="t('config.ruleProperties.preview.inactiveEffectTooltip', 'Propriedades que seriam aplicadas se a condição mudasse para o outro resultado.')"
                   matTooltipPosition="above"
                   >
-                  <mat-icon>help_outline</mat-icon>
                 </button>
               </div>
               <pre>{{ rulePreview.inactiveProperties | json }}</pre>
@@ -28475,7 +28440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </div>
       </mat-card-content>
     </mat-card>
-    `, styles: [":host{display:block;min-width:0}.rule-props-card{margin-top:16px;min-width:0;overflow:visible;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface-container-low);box-shadow:none}.rule-props-header{padding:16px 18px 10px}.rule-props-avatar{display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 42%,transparent)}.rule-props-card mat-card-content{display:grid;gap:14px;min-width:0;padding:0 18px 18px}.rule-context{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,var(--md-sys-color-outline-variant));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 16%,var(--md-sys-color-surface-container) 84%);min-width:0}.rule-context__main{display:grid;gap:3px;min-width:0}.rule-context__main strong{overflow:hidden;color:var(--md-sys-color-on-surface);font-size:15px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.rule-context__main span:last-child{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.rule-context__eyebrow{color:var(--md-sys-color-primary);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.rule-context__meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}.rule-context__chip{display:inline-flex;align-items:center;min-height:24px;max-width:180px;padding:3px 9px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.rule-context__chip--warn{border-color:color-mix(in srgb,var(--md-sys-color-tertiary, var(--md-sys-color-primary)) 42%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.rule-props-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;min-width:0}.rule-editor-section{display:grid;gap:8px;min-width:0}.rule-editor-section--selector{padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.rule-editor-section__title{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:700}.rule-editor-section__title span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font-size:11px}.property-workbench{grid-column:1 / -1;display:grid;gap:6px;min-width:0;padding-top:2px}.property-workbench__summary{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.4}.value-row{grid-column:1 / -1;display:grid;grid-template-columns:minmax(min(210px,100%),.45fr) minmax(min(260px,100%),1fr);align-items:start;gap:12px;min-width:0;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.value-label{padding-top:16px;color:var(--md-sys-color-on-surface-variant);font-weight:600;line-height:1.35}.options-editor{grid-column:1 / -1;display:grid;gap:10px;width:100%;min-width:0;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.options-editor__title{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:600}.option-row{display:grid;grid-template-columns:minmax(min(160px,100%),1fr) minmax(min(160px,100%),1fr) auto auto;gap:10px;align-items:center;min-width:0}.validator-row{display:grid;grid-template-columns:minmax(min(150px,100%),1fr) minmax(min(120px,100%),.7fr) minmax(min(150px,100%),1fr) auto auto;gap:10px;align-items:center;min-width:0}.breakpoint-row{display:grid;grid-template-columns:56px minmax(min(160px,100%),1fr);gap:10px;align-items:center;min-width:0}.style-row{display:grid;grid-template-columns:minmax(min(220px,100%),1.1fr) minmax(min(120px,100%),.45fr) minmax(min(220px,100%),1fr) auto;gap:10px;align-items:start;min-width:0}.breakpoint-label{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:700;text-transform:uppercase}.visual-block-rule-note{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 32%,var(--md-sys-color-outline-variant));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 28%,var(--md-sys-color-surface) 72%);color:var(--md-sys-color-on-surface);font-size:13px;line-height:1.45}.visual-block-rule-note mat-icon{width:18px;height:18px;font-size:18px;color:var(--md-sys-color-primary)}.visual-block-node-select{grid-column:1 / -1}.actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.actions__hint{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.preview{grid-column:1 / -1;background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);padding:12px;border-radius:8px}.preview-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.preview-header h4{margin:0 0 4px}.preview-header p{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.4}.preview-state{flex:0 0 auto;min-width:96px;padding:6px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface);font-size:12px;font-weight:600;text-align:center}.preview-state--active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 42%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 36%,var(--md-sys-color-surface) 64%)}.preview-state--false{border-color:color-mix(in srgb,var(--md-sys-color-tertiary, var(--md-sys-color-primary)) 34%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.preview-state--invalid{border-color:var(--md-sys-color-error);color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 36%,var(--md-sys-color-surface) 64%)}.preview-sample-field{width:100%}.preview-error{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin:4px 0 10px;color:var(--md-sys-color-error);font-size:13px}.preview-error mat-icon{width:18px;height:18px;font-size:18px}.preview-label{display:inline-flex;align-items:center;gap:8px;margin:4px 0;color:var(--md-sys-color-on-surface-variant);font-size: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}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}@media(max-width:720px){.rule-context{grid-template-columns:1fr}.rule-context__meta{justify-content:flex-start}.rule-props-grid,.value-row,.option-row,.validator-row,.breakpoint-row,.style-row{grid-template-columns:1fr}}\n"] }]
+    `, styles: [":host{display:block;min-width:0}.rule-props-card{margin-top:16px;min-width:0;overflow:visible;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface-container-low);box-shadow:none}.rule-props-header{padding:16px 18px 10px}.rule-props-avatar{display:inline-flex;align-items:center;justify-content:center;color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 42%,transparent)}.rule-props-card mat-card-content{display:grid;gap:14px;min-width:0;padding:0 18px 18px}.rule-context{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,var(--md-sys-color-outline-variant));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 16%,var(--md-sys-color-surface-container) 84%);min-width:0}.rule-context__main{display:grid;gap:3px;min-width:0}.rule-context__main strong{overflow:hidden;color:var(--md-sys-color-on-surface);font-size:15px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.rule-context__main span:last-child{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.rule-context__eyebrow{color:var(--md-sys-color-primary);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.rule-context__meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}.rule-context__chip{display:inline-flex;align-items:center;min-height:24px;max-width:180px;padding:3px 9px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.rule-context__chip--warn{border-color:color-mix(in srgb,var(--md-sys-color-tertiary, var(--md-sys-color-primary)) 42%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.rule-props-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;min-width:0}.rule-editor-section{display:grid;gap:8px;min-width:0}.rule-editor-section--selector{padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.rule-editor-section__title{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:700}.rule-editor-section__title span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font-size:11px}.property-workbench{grid-column:1 / -1;display:grid;gap:6px;min-width:0;padding-top:2px}.property-workbench__summary{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.4}.value-row{grid-column:1 / -1;display:grid;grid-template-columns:minmax(min(210px,100%),.45fr) minmax(min(260px,100%),1fr);align-items:start;gap:12px;min-width:0;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.value-label{padding-top:16px;color:var(--md-sys-color-on-surface-variant);font-weight:600;line-height:1.35}.options-editor{grid-column:1 / -1;display:grid;gap:10px;width:100%;min-width:0;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.options-editor__title{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:600}.option-row{display:grid;grid-template-columns:minmax(min(160px,100%),1fr) minmax(min(160px,100%),1fr) auto auto;gap:10px;align-items:center;min-width:0}.validator-row{display:grid;grid-template-columns:minmax(min(150px,100%),1fr) minmax(min(120px,100%),.7fr) minmax(min(150px,100%),1fr) auto auto;gap:10px;align-items:center;min-width:0}.breakpoint-row{display:grid;grid-template-columns:56px minmax(min(160px,100%),1fr);gap:10px;align-items:center;min-width:0}.style-row{display:grid;grid-template-columns:minmax(min(220px,100%),1.1fr) minmax(min(120px,100%),.45fr) minmax(min(220px,100%),1fr) auto;gap:10px;align-items:start;min-width:0}.breakpoint-label{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:700;text-transform:uppercase}.visual-block-rule-note{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 32%,var(--md-sys-color-outline-variant));border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 28%,var(--md-sys-color-surface) 72%);color:var(--md-sys-color-on-surface);font-size:13px;line-height:1.45}.visual-block-rule-note mat-icon{width:18px;height:18px;font-size:18px;color:var(--md-sys-color-primary)}.visual-block-node-select{grid-column:1 / -1}.actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.actions__hint{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.35}.preview{grid-column:1 / -1;background:var(--md-sys-color-surface-container, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);padding:12px;border-radius:8px}.preview-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.preview-header h4{margin:0 0 4px}.preview-header p{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.4}.preview-state{flex:0 0 auto;min-width:96px;padding:6px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface);font-size:12px;font-weight:600;text-align:center}.preview-state--active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 42%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 36%,var(--md-sys-color-surface) 64%)}.preview-state--false{border-color:color-mix(in srgb,var(--md-sys-color-tertiary, var(--md-sys-color-primary)) 34%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-tertiary, var(--md-sys-color-primary))}.preview-state--invalid{border-color:var(--md-sys-color-error);color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 36%,var(--md-sys-color-surface) 64%)}.preview-sample-field{width:100%}.preview-error{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin:4px 0 10px;color:var(--md-sys-color-error);font-size:13px}.preview-error mat-icon{width:18px;height:18px;font-size:18px}.preview-label{display:inline-flex;align-items:center;gap:8px;margin:4px 0;color:var(--md-sys-color-on-surface-variant);font-size:12px}.danger-action{color:var(--md-sys-color-error)}@media(max-width:720px){.rule-context{grid-template-columns:1fr}.rule-context__meta{justify-content:flex-start}.rule-props-grid,.value-row,.option-row,.validator-row,.breakpoint-row,.style-row{grid-template-columns:1fr}}\n"] }]
         }], propDecorators: { rules: [{
                 type: Input
             }], visualBlockNodes: [{
@@ -30276,7 +30241,7 @@ class PraxisDynamicFormConfigEditor {
         return Object.entries(params).reduce((text, [key, value]) => text.split(`{{${key}}}`).join(String(value)), fallback);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDynamicFormConfigEditor, deps: [{ token: ASYNC_CONFIG_STORAGE }, { token: FormConfigService }, { token: i7.SettingsPanelService }, { token: i0.ChangeDetectorRef }, { token: GLOBAL_ACTION_CATALOG, optional: true }, { token: SETTINGS_PANEL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisDynamicFormConfigEditor, isStandalone: true, selector: "praxis-dynamic-form-config-editor", providers: [FormConfigService], viewQueries: [{ propertyName: "jsonEditor", first: true, predicate: JsonConfigEditorComponent, descendants: true }, { propertyName: "cascadeManager", first: true, predicate: CascadeManagerTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"mobile-tab-selector\">\n  <mat-form-field appearance=\"outline\" class=\"mobile-tab-selector__field\">\n    <mat-label>{{ tx('config.tabs.mobileLabel', 'Se\u00E7\u00E3o do editor') }}</mat-label>\n    <mat-select [(ngModel)]=\"selectedConfigTabIndex\" data-testid=\"dynamic-form-config-editor-mobile-tabs\">\n      @for (tab of configTabOptions; track tab.key) {\n        <mat-option [value]=\"tab.index\">{{ tab.label }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-tab-group class=\"config-tabs\" data-testid=\"dynamic-form-config-editor-tabs\" [(selectedIndex)]=\"selectedConfigTabIndex\">\n  <mat-tab [label]=\"configTabLabel('general')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-geral\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.general.title', 'Dados do formul\u00E1rio') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.general.subtitle', 'Defina o modo de dados e o contexto de edi\u00E7\u00E3o.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.general.inputMode.label', 'Modo de dados') }}</mat-label>\n                <mat-select [(ngModel)]=\"inputMode\" (ngModelChange)=\"onInputModeChange()\">\n                  <mat-option value=\"create\">{{ tx('config.general.inputMode.create', 'create') }}</mat-option>\n                  <mat-option value=\"edit\">{{ tx('config.general.inputMode.edit', 'edit') }}</mat-option>\n                  <mat-option value=\"view\">{{ tx('config.general.inputMode.view', 'view') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isBindingsBlockPersisted()\">\n              <strong>{{ tx('config.general.bindings.label', 'Bindings') }}</strong>\n              @if (isBindingsBlockPersisted()) {\n                <span>{{ tx('config.general.bindings.persisted', '`bindings.mode` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.general.bindings.implicit', 'Bloco ausente no documento can\u00F4nico. O valor exibido \u00E9 fallback visual e n\u00E3o ser\u00E1 salvo at\u00E9 voc\u00EA editar este campo.') }}\n              }\n            </div>\n            <div class=\"section-help\">\n              <span class=\"section-help__label\">{{ tx('config.common.understand', 'Entenda:') }}</span>\n              <button\n                mat-icon-button\n                class=\"help-icon-button\"\n                type=\"button\"\n                [matTooltip]=\"tx('config.general.inputMode.tooltip', 'O mode controla o fluxo (create/edit/view). enableCustomization s\u00F3 libera edi\u00E7\u00E3o do layout e n\u00E3o altera o mode.')\"\n                matTooltipPosition=\"above\"\n                >\n                <mat-icon>help_outline</mat-icon>\n              </button>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n\n      @if (hasResolvedRuntimeContract()) {\n        <mat-card\n          class=\"section-card\"\n          data-testid=\"config-tab-runtime-contract\"\n          >\n          <mat-card-content>\n            <div class=\"section-header\">\n              <div>\n                <h3>{{ tx('config.general.runtimeContract.title', 'Contrato Runtime Resolvido') }}</h3>\n                <p class=\"text-caption\">\n                  {{ tx('config.general.runtimeContract.subtitle', 'Visualiza\u00E7\u00E3o somente leitura do contrato backend resolvido pelo host atual.') }}\n                </p>\n              </div>\n            </div>\n            <div class=\"block-status block-status--readonly\">\n              <strong>{{ tx('config.general.runtimeContract.runtimeLabel', 'Runtime') }}</strong>\n              <span>\n                {{ tx('config.general.runtimeContract.readonly', 'Esses valores v\u00EAm do host/runtime atual e n\u00E3o s\u00E3o persistidos em `bindings` nem em `contextSnapshot`.') }}\n              </span>\n            </div>\n            <div class=\"runtime-contract-grid\">\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.schemaUrl', 'Schema URL') }}</span>\n                <code class=\"runtime-contract-code\">{{ runtimeContract?.schemaUrl || '\u2014' }}</code>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.schemaSource', 'Origem do schema') }}</span>\n                <strong>{{ describeRuntimeSource(runtimeContract?.schemaSource) }}</strong>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitMethod', 'Submit method') }}</span>\n                <strong>{{ runtimeContract?.submitMethod || '\u2014' }}</strong>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitUrl', 'Submit URL') }}</span>\n                <code class=\"runtime-contract-code\">{{ runtimeContract?.submitUrl || '\u2014' }}</code>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitSource', 'Origem do submit') }}</span>\n                <strong>{{ describeRuntimeSource(runtimeContract?.submitSource) }}</strong>\n              </div>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      }\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('schema')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-schema\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.schema.title', 'Valida\u00E7\u00E3o de schema') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.schema.subtitle', 'Controle avisos quando o schema do servidor mudar.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.schema.notify.label', 'Notificar quando desatualizado') }}</mat-label>\n                <mat-select [(ngModel)]=\"schemaPrefs.notifyIfOutdated\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-notify')\">\n                  <mat-option value=\"both\">{{ tx('config.schema.notify.both', 'Banner + Snackbar') }}</mat-option>\n                  <mat-option value=\"inline\">{{ tx('config.schema.notify.inline', 'Somente Banner') }}</mat-option>\n                  <mat-option value=\"snackbar\">{{ tx('config.schema.notify.snackbar', 'Somente Snackbar') }}</mat-option>\n                  <mat-option value=\"none\">{{ tx('config.schema.notify.none', 'Nenhum') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.schema.snooze.label', 'Intervalo de sil\u00EAncio (ms)') }}</mat-label>\n                <input matInput type=\"number\" [(ngModel)]=\"schemaPrefs.snoozeMs\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-snooze')\" />\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-slide-toggle [(ngModel)]=\"schemaPrefs.autoOpenSettingsOnOutdated\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-auto-open')\">\n                {{ tx('config.schema.autoOpenSettings', 'Abrir configura\u00E7\u00F5es automaticamente') }}\n              </mat-slide-toggle>\n            </div>\n            @if (serverMeta) {\n              <div class=\"form-row\">\n                <div class=\"meta-card\">\n                  <div class=\"meta-row\">\n                    <span>{{ tx('config.schema.meta.serverHash', 'Server hash') }}</span>\n                    <strong>{{ serverMeta.serverHash || '\u2014' }}</strong>\n                  </div>\n                  <div class=\"meta-row\">\n                    <span>{{ tx('config.schema.meta.lastVerifiedAt', '\u00DAltima verifica\u00E7\u00E3o') }}</span>\n                    <strong>{{ serverMeta.lastVerifiedAt || '\u2014' }}</strong>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isSchemaPrefsBlockPersisted()\">\n              <strong>{{ tx('config.schema.prefs.label', 'Schema Prefs') }}</strong>\n              @if (isSchemaPrefsBlockPersisted()) {\n                <span>{{ tx('config.schema.prefs.persisted', '`contextSnapshot.schemaPrefs` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.schema.prefs.implicit', 'Bloco ausente no documento can\u00F4nico. Os controles exibem fallback visual e n\u00E3o ser\u00E3o salvos at\u00E9 voc\u00EA editar.') }}\n              }\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('layout')\">\n    <div class=\"tab-content tab-content--full\" data-testid=\"config-tab-panel-layout\">\n      <div class=\"section-header section-header--compact\">\n        <div>\n          <h3>{{ tx('config.layout.title', 'Layout do formul\u00E1rio') }}</h3>\n          <p class=\"text-caption\">{{ tx('config.layout.subtitle', 'Organize se\u00E7\u00F5es, linhas e campos com drag & drop.') }}</p>\n        </div>\n      </div>\n      <div class=\"section-body section-body--flex\">\n        <praxis-layout-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"\n        (select)=\"onLayoutSelect($event)\"></praxis-layout-editor>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('hooks')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-hooks\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.hooks.title', 'Hooks de ciclo de vida') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.hooks.subtitle', 'Automatize a\u00E7\u00F5es nos eventos do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <praxis-hooks-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-hooks-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  @if (isPresentationMode) {\n    <mat-tab [label]=\"configTabLabel('presentation')\">\n      <div class=\"tab-content\" data-testid=\"config-tab-panel-presentation\">\n        <mat-card class=\"section-card\">\n          <mat-card-content>\n            <div class=\"section-header\">\n              <div>\n                <h3>{{ tx('config.presentation.title', 'Modo Apresenta\u00E7\u00E3o') }}</h3>\n                <p class=\"text-caption\">{{ tx('config.presentation.subtitle', 'Configura\u00E7\u00F5es de exibi\u00E7\u00E3o aplicadas somente ao modo apresenta\u00E7\u00E3o.') }}</p>\n              </div>\n            </div>\n            <div class=\"presentation-layout\">\n              <div class=\"presentation-controls\">\n                <div class=\"block-status control-span\" [class.block-status--implicit]=\"!isPresentationBlockPersisted()\">\n                  <strong>{{ tx('config.presentation.block.label', 'Presentation') }}</strong>\n                  @if (isPresentationBlockPersisted()) {\n                    <span>{{ tx('config.presentation.block.persisted', '`contextSnapshot.presentation` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n                  } @else {\n                    {{ tx('config.presentation.block.implicit', 'Bloco ausente no documento can\u00F4nico. A pr\u00E9-visualiza\u00E7\u00E3o usa fallback local e n\u00E3o ser\u00E1 salva at\u00E9 voc\u00EA editar.') }}\n                  }\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.labelPosition.label', 'Posi\u00E7\u00E3o do r\u00F3tulo') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.labelPosition\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-position')\" [attr.aria-label]=\"tx('config.presentation.labelPosition.ariaLabel', 'Posi\u00E7\u00E3o do r\u00F3tulo')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"above\">\n                      <mat-icon>view_stream</mat-icon>\n                      <span class=\"sr-only\">{{ tx('config.presentation.labelPosition.above', 'Acima') }}</span>\n                    </mat-button-toggle>\n                    <mat-button-toggle value=\"left\">\n                      <mat-icon>view_column</mat-icon>\n                      <span class=\"sr-only\">{{ tx('config.presentation.labelPosition.left', '\u00C0 esquerda') }}</span>\n                    </mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.density.label', 'Densidade') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.density\" (ngModelChange)=\"onPresentationPrefsChange('presentation-density')\" [attr.aria-label]=\"tx('config.presentation.density.ariaLabel', 'Densidade')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"comfortable\">{{ tx('config.presentation.density.comfortable', 'Confort\u00E1vel') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"cozy\">{{ tx('config.presentation.density.cozy', 'Intermedi\u00E1ria') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"compact\">{{ tx('config.presentation.density.compact', 'Compacta') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.labelAlign.label', 'Alinhamento do r\u00F3tulo') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.labelAlign\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-align')\" [attr.aria-label]=\"tx('config.presentation.labelAlign.ariaLabel', 'Alinhamento do r\u00F3tulo')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"start\"><mat-icon>format_align_left</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"center\"><mat-icon>format_align_center</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"end\"><mat-icon>format_align_right</mat-icon></mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.valueAlign.label', 'Alinhamento do valor') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.valueAlign\" (ngModelChange)=\"onPresentationPrefsChange('presentation-value-align')\" [attr.aria-label]=\"tx('config.presentation.valueAlign.ariaLabel', 'Alinhamento do valor')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"start\"><mat-icon>format_align_left</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"center\"><mat-icon>format_align_center</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"end\"><mat-icon>format_align_right</mat-icon></mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.labelFontSize.label', 'Tamanho do r\u00F3tulo') }}</mat-label>\n                    <input matInput type=\"number\" min=\"10\" [(ngModel)]=\"presentationPrefs.labelFontSize\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-font-size')\"\n                      [placeholder]=\"tx('config.presentation.labelFontSize.placeholder', 'ex.: 12')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.valueFontSize.label', 'Tamanho do valor') }}</mat-label>\n                    <input matInput type=\"number\" min=\"10\" [(ngModel)]=\"presentationPrefs.valueFontSize\" (ngModelChange)=\"onPresentationPrefsChange('presentation-value-font-size')\"\n                      [placeholder]=\"tx('config.presentation.valueFontSize.placeholder', 'ex.: 16')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.labelWidth.label', 'Largura do r\u00F3tulo (label \u00E0 esquerda)') }}</mat-label>\n                    <input matInput type=\"number\" min=\"60\" [(ngModel)]=\"presentationPrefs.labelWidth\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-width')\"\n                      [placeholder]=\"tx('config.presentation.labelWidth.placeholder', 'ex.: 140')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control control--inline\">\n                  <mat-slide-toggle [(ngModel)]=\"presentationPrefs.compact\" (ngModelChange)=\"onPresentationPrefsChange('presentation-compact')\">\n                    {{ tx('config.presentation.options.compactMode', 'Modo compacto') }}\n                  </mat-slide-toggle>\n                  <mat-checkbox [(ngModel)]=\"truncatePreview\">\n                    {{ tx('config.presentation.options.truncateValues', 'Truncar valores') }}\n                  </mat-checkbox>\n                </div>\n              </div>\n              <div class=\"presentation-preview\">\n                <h4>{{ tx('config.presentation.preview.title', 'Pr\u00E9-visualiza\u00E7\u00E3o') }}</h4>\n                <div class=\"preview-card\">\n                <div class=\"praxis-dynamic-form presentation-mode\" [ngClass]=\"{\n                           'pres-compact': !!presentationPrefs.compact,\n                           'pres-label-left': presentationPrefs.labelPosition === 'left',\n                           'pres-label-above': presentationPrefs.labelPosition === 'above',\n                           'pres-density-compact': presentationPrefs.density === 'compact',\n                           'pres-density-cozy': presentationPrefs.density === 'cozy'\n                         }\" [style.--pfx-pres-label-size]=\"(presentationPrefs.labelFontSize || 12) + 'px'\"\n                    [style.--pfx-pres-value-size]=\"(presentationPrefs.valueFontSize || 16) + 'px'\"\n                    [style.--pfx-pres-label-width]=\"(presentationPrefs.labelWidth || 140) + 'px'\"\n                    [style.--pfx-pres-label-align]=\"presentationPrefs.labelAlign || 'start'\"\n                    [style.--pfx-pres-value-align]=\"presentationPrefs.valueAlign || 'start'\">\n                    @for (item of previewItems; track item) {\n                      <div class=\"preview-row\">\n                        <span class=\"praxis-presentation__label\">{{ item.label }}</span>\n                        <span class=\"praxis-presentation__value\" [title]=\"truncatePreview ? item.value : null\"\n                          [style.maxWidth]=\"truncatePreview ? '280px' : null\"\n                          [style.overflow]=\"truncatePreview ? 'hidden' : null\"\n                          [style.textOverflow]=\"truncatePreview ? 'ellipsis' : null\"\n                          [style.whiteSpace]=\"truncatePreview ? 'nowrap' : 'normal'\">\n                          {{ item.value }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"section-help\">\n              <span class=\"section-help__label\">{{ tx('config.common.understand', 'Entenda:') }}</span>\n              <button\n                mat-icon-button\n                class=\"help-icon-button\"\n                type=\"button\"\n                [matTooltip]=\"tx('config.presentation.help.tooltip', 'Ajustes aplicam somente ao Modo Apresenta\u00E7\u00E3o e s\u00E3o salvos por formul\u00E1rio (via CSS/Classes).')\"\n                matTooltipPosition=\"above\"\n                >\n                <mat-icon>help_outline</mat-icon>\n              </button>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </mat-tab>\n  }\n  <mat-tab [label]=\"configTabLabel('behavior')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-comportamento\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.behavior.title', 'Comportamento') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.behavior.subtitle', 'Ajuste valida\u00E7\u00F5es e respostas do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <praxis-behavior-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-behavior-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('hints')\">\n    <div class=\"tab-content tab-content--dense\" data-testid=\"config-tab-panel-hints\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.hints.title', 'Dicas dos modos') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.hints.subtitle', 'Personalize textos de apoio para modos de dados e estados de UI.') }}</p>\n            </div>\n          </div>\n          <p class=\"text-caption\">{{ tx('config.hints.description', 'Personalize os textos usados como tooltip/hint para modos de dados e modos globais de UI.') }}</p>\n\n          <div class=\"grid-2-cols grid-2-cols--compact\">\n            <section>\n              <h4>{{ tx('config.hints.dataModes.title', 'Modos de dados') }}</h4>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.create.label', 'Criar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.create\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-create')\" [placeholder]=\"tx('config.hints.dataModes.create.placeholder', 'Ex.: Preencha os campos obrigat\u00F3rios.')\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.edit.label', 'Editar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.edit\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-edit')\" [placeholder]=\"tx('config.hints.dataModes.edit.placeholder', 'Ex.: Revise os dados antes de salvar.')\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.view.label', 'Visualizar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.view\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-view')\" [placeholder]=\"tx('config.hints.dataModes.view.placeholder', 'Ex.: Visualiza\u00E7\u00E3o somente leitura.')\" />\n              </mat-form-field>\n            </section>\n\n            <section>\n              <h4>{{ tx('config.hints.uiModes.title', 'Modos de UI') }}</h4>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.presentation.label', 'Apresenta\u00E7\u00E3o') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.presentation\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-presentation')\" [placeholder]=\"tx('config.hints.uiModes.presentation.placeholder', 'Ex.: Modo compacto para leitura r\u00E1pida.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.readonly.label', 'Leitura (readonly)') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.readonly\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-readonly')\" [placeholder]=\"tx('config.hints.uiModes.readonly.placeholder', 'Ex.: Campos bloqueados para edi\u00E7\u00E3o.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.disabled.label', 'Desabilitado') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.disabled\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-disabled')\" [placeholder]=\"tx('config.hints.uiModes.disabled.placeholder', 'Ex.: Fun\u00E7\u00E3o indispon\u00EDvel no momento.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.visible.label', 'Vis\u00EDvel') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.visible\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-visible')\" [placeholder]=\"tx('config.hints.uiModes.visible.placeholder', 'Ex.: Campo exibido conforme permiss\u00F5es.')\"></textarea>\n              </mat-form-field>\n            </section>\n          </div>\n\n          <section>\n            <h4>{{ tx('config.helpPresentation.title', 'Apresenta\u00E7\u00E3o das ajudas dos campos') }}</h4>\n            <p class=\"text-caption\">{{ tx('config.helpPresentation.description', 'Controle como hint/helpText dos campos aparece em formul\u00E1rios densos. Erros de valida\u00E7\u00E3o continuam inline.') }}</p>\n            <div class=\"grid-3-cols\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.display.label', 'Exibi\u00E7\u00E3o') }}</mat-label>\n                <mat-select [ngModel]=\"helpPresentationDraft.display\" (ngModelChange)=\"onHelpPresentationDisplayChange($event)\">\n                  <mat-option value=\"inline\">{{ tx('config.helpPresentation.display.inline', 'Inline') }}</mat-option>\n                  <mat-option value=\"popover\">{{ tx('config.helpPresentation.display.popover', '\u00CDcone de ajuda') }}</mat-option>\n                  <mat-option value=\"auto\">{{ tx('config.helpPresentation.display.auto', 'Autom\u00E1tica') }}</mat-option>\n                  <mat-option value=\"hidden\">{{ tx('config.helpPresentation.display.hidden', 'Oculta') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.inlineMaxLength.label', 'Limite inline') }}</mat-label>\n                <input matInput type=\"number\" min=\"0\" [ngModel]=\"helpPresentationDraft.inlineMaxLength\"\n                  (ngModelChange)=\"onHelpPresentationInlineMaxLengthChange($event)\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.preferPopoverForControls.label', 'Preferir \u00EDcone em') }}</mat-label>\n                <input matInput [ngModel]=\"getHelpPreferPopoverControlsText()\"\n                  (ngModelChange)=\"onHelpPreferPopoverControlsChange($event)\"\n                  [placeholder]=\"tx('config.helpPresentation.preferPopoverForControls.placeholder', 'toggle, checkbox, select')\" />\n              </mat-form-field>\n            </div>\n          </section>\n\n          <div class=\"actions-row\">\n            <button mat-stroked-button color=\"primary\" type=\"button\" (click)=\"restoreHintsDefaults()\">\n              <mat-icon>restore</mat-icon>\n              {{ tx('config.hints.actions.restoreDefaults', 'Restaurar padr\u00F5es') }}\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('actions')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-acoes\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.actions.title', 'A\u00E7\u00F5es do formul\u00E1rio') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.actions.subtitle', 'Configure bot\u00F5es padr\u00E3o e a\u00E7\u00F5es customizadas.') }}</p>\n            </div>\n          </div>\n          <praxis-actions-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-actions-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('rules')\">\n    <div class=\"tab-content visual-builder-content\" data-testid=\"config-tab-panel-regras\">\n      <div class=\"builder-header\">\n        <div>\n          <h3>{{ tx('config.rules.title', 'Regras visuais') }}</h3>\n          <p class=\"text-caption\">{{ tx('config.rules.subtitle', 'Defina visibilidade, estilos e rea\u00E7\u00F5es baseadas em condi\u00E7\u00F5es.') }}</p>\n        </div>\n      </div>\n      @if (ruleDiagnostics.length) {\n        <div class=\"rules-diagnostics\" data-testid=\"rules-diagnostics-panel\">\n          <div class=\"rules-diagnostics__summary\">\n            <span class=\"rules-diagnostics__pill rules-diagnostics__pill--total\">\n              {{ tx('config.rules.summary.total', '{{count}} regras', { count: ruleDiagnosticsSummary.total }) }}\n            </span>\n            @if (ruleDiagnosticsSummary.invalid) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--error\">\n                {{ tx('config.rules.summary.invalid', '{{count}} inv\u00E1lidas', { count: ruleDiagnosticsSummary.invalid }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.unsupported) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.unsupported', '{{count}} com propriedades rejeitadas', { count: ruleDiagnosticsSummary.unsupported }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.runtimeOnly) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.runtimeOnly', '{{count}} runtime only', { count: ruleDiagnosticsSummary.runtimeOnly }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.pendingReview) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.pendingReview', '{{count}} pendentes de revis\u00E3o', { count: ruleDiagnosticsSummary.pendingReview }) }}\n              </span>\n            }\n          </div>\n          <div class=\"rules-diagnostics__list\" [attr.aria-label]=\"tx('config.rules.diagnostics.ariaLabel', 'Diagn\u00F3stico das regras')\">\n            @for (diagnostic of ruleDiagnostics; track diagnostic) {\n              <article class=\"rules-diagnostics__item\"\n                [class.rules-diagnostics__item--error]=\"getRuleStatusTone(diagnostic) === 'error'\"\n                [class.rules-diagnostics__item--warn]=\"getRuleStatusTone(diagnostic) === 'warn'\">\n                <div>\n                  <strong>{{ diagnostic.ruleName || diagnostic.ruleId }}</strong>\n                  <span>\n                    {{ tx('config.rules.diagnostics.targetConditionSummary', '{{targets}} alvo(s) \u00B7 {{conditions}} campo(s) na condi\u00E7\u00E3o', { targets: diagnostic.targetRefs.length, conditions: diagnostic.conditionRefs.length }) }}\n                  </span>\n                  @if (getRuleDiagnosticDetails(diagnostic).length) {\n                    <ul class=\"rules-diagnostics__details\">\n                      @for (detail of getRuleDiagnosticDetails(diagnostic); track detail) {\n                        <li>{{ detail }}</li>\n                      }\n                    </ul>\n                  }\n                </div>\n                <div class=\"rules-diagnostics__actions\">\n                  <span class=\"rules-diagnostics__status\">{{ getRuleStatusLabel(diagnostic) }}</span>\n                  @if (canApplyRulePropertyFix(diagnostic)) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [matTooltip]=\"tx('config.rules.actions.fix.tooltip', 'Aplicar whitelist e saneamento de propriedades nesta regra')\"\n                      (click)=\"applyRulePropertyFix(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                      {{ tx('config.rules.actions.fix', 'Corrigir') }}\n                    </button>\n                  }\n                  @if (diagnostic.status.includes('llm-generated-pending-review')) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [disabled]=\"!canAcceptPendingLlmRule(diagnostic)\"\n                      [matTooltip]=\"canAcceptPendingLlmRule(diagnostic) ? tx('config.rules.actions.accept.tooltip.ready', 'Aceitar sugest\u00E3o e atualizar estado visual') : tx('config.rules.actions.accept.tooltip.blocked', 'Corrija alvo, condi\u00E7\u00E3o e propriedades antes de aceitar')\"\n                      (click)=\"acceptPendingLlmRule(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">check</mat-icon>\n                      {{ tx('config.rules.actions.accept', 'Aceitar') }}\n                    </button>\n                  }\n                  @if (canOpenRuleJsonReview(diagnostic)) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [matTooltip]=\"tx('config.rules.actions.reviewJson.tooltip', 'Abrir a aba JSON para revisar esta regra sem convers\u00E3o visual')\"\n                      (click)=\"openRuleJsonReview(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">data_object</mat-icon>\n                      {{ tx('config.rules.actions.reviewJson', 'Ver JSON') }}\n                    </button>\n                  }\n                </div>\n              </article>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"rules-diagnostics rules-diagnostics--empty\" data-testid=\"rules-diagnostics-empty\">\n          {{ tx('config.rules.empty', 'Nenhuma regra definida ainda. Crie uma regra para ver alvos, condi\u00E7\u00E3o, propriedades e compatibilidade do builder.') }}\n        </div>\n      }\n      <praxis-visual-builder [config]=\"ruleBuilderConfig\" [initialRules]=\"ruleBuilderState\"\n      (rulesChanged)=\"onRulesChanged($event)\"></praxis-visual-builder>\n      <praxis-rule-properties-panel\n        [rules]=\"currentRules\"\n        [visualBlockNodes]=\"visualBlockNodeOptions\"\n        (rulesChange)=\"onRulePropertiesChanged($event)\"\n      ></praxis-rule-properties-panel>\n      <mat-card class=\"command-rules-card\" data-testid=\"form-command-rules-editor\">\n        <mat-card-title>{{ tx('config.commandRules.title', 'Comandos condicionais') }}</mat-card-title>\n        <mat-card-subtitle>{{ tx('config.commandRules.subtitle', 'Execute a\u00E7\u00F5es globais quando uma condi\u00E7\u00E3o do formul\u00E1rio for satisfeita.') }}</mat-card-subtitle>\n        <mat-card-content>\n          <div class=\"command-rules-grid\">\n            <div class=\"command-rules-toolbar\">\n              <mat-form-field appearance=\"fill\" class=\"command-rules-select\">\n                <mat-label>{{ tx('config.commandRules.command.label', 'Comando') }}</mat-label>\n                <mat-select [(ngModel)]=\"selectedCommandRuleId\" (selectionChange)=\"onCommandRuleSelectionChange()\">\n                  @for (rule of commandRules; track rule) {\n                    <mat-option [value]=\"rule.id\">\n                      {{ rule.id }}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <button mat-stroked-button type=\"button\" (click)=\"addCommandRule()\">\n                <mat-icon aria-hidden=\"true\">add</mat-icon>\n                {{ tx('config.commandRules.actions.add', 'Adicionar') }}\n              </button>\n              <button mat-stroked-button color=\"warn\" type=\"button\" (click)=\"deleteCommandRule()\" [disabled]=\"!selectedCommandRuleId\">\n                <mat-icon aria-hidden=\"true\">delete</mat-icon>\n                {{ tx('config.commandRules.actions.remove', 'Remover') }}\n              </button>\n            </div>\n\n            @if (selectedCommandRuleId) {\n              <div class=\"command-rule-condition-builder command-rules-full\">\n                <praxis-visual-builder\n                  mode=\"condition\"\n                  [config]=\"ruleBuilderConfig\"\n                  [initialCondition]=\"commandRuleCondition\"\n                  (conditionChanged)=\"onCommandConditionChanged($event)\"\n                ></praxis-visual-builder>\n              </div>\n            }\n\n            <mat-form-field appearance=\"fill\" class=\"command-rules-full\">\n              <mat-label>{{ tx('config.commandRules.conditionJson.label', 'Condi\u00E7\u00E3o JSON Logic') }}</mat-label>\n              <textarea\n                matInput\n                rows=\"5\"\n                [(ngModel)]=\"commandRuleConditionJson\"\n                [attr.aria-label]=\"tx('config.commandRules.conditionJson.ariaLabel', 'Condi\u00E7\u00E3o JSON Logic do comando condicional')\"\n              ></textarea>\n            </mat-form-field>\n\n            <mat-form-field appearance=\"fill\">\n              <mat-label>{{ tx('config.commandRules.globalAction.label', 'A\u00E7\u00E3o global') }}</mat-label>\n              <mat-select [(ngModel)]=\"commandRuleActionId\" (selectionChange)=\"onCommandActionChange()\">\n                @for (action of globalActionCatalog; track action) {\n                  <mat-option [value]=\"action.id\">\n                    {{ action.label || action.id }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n\n            <mat-form-field appearance=\"fill\">\n              <mat-label>{{ tx('config.commandRules.distinctBy.label', 'distinctBy') }}</mat-label>\n              <input matInput [(ngModel)]=\"commandRuleDistinctBy\" [placeholder]=\"tx('config.commandRules.distinctBy.placeholder', 'ex.: idade')\" />\n            </mat-form-field>\n\n            @if (commandRuleActionSchema; as actionSchema) {\n              <div\n                class=\"command-rules-payload-fields command-rules-full\"\n                >\n                <div class=\"command-rules-section-title\">{{ tx('config.commandRules.structuredPayload.title', 'Payload estruturado') }}</div>\n                @if (actionSchema.editorMode !== 'surface-open') {\n                  @for (field of actionSchema.fields; track field) {\n                    @if (shouldShowCommandActionField(field)) {\n                      @if (field.type === 'toggle') {\n                        <mat-slide-toggle\n                          [ngModel]=\"getCommandActionFieldValue(field)\"\n                          (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          >\n                          {{ field.label }}\n                        </mat-slide-toggle>\n                      } @else {\n                        <mat-form-field appearance=\"fill\">\n                          <mat-label>{{ field.label }}</mat-label>\n                          @if (field.type === 'textarea' || field.type === 'json') {\n                            <textarea\n                              matInput\n                              [rows]=\"field.rows || (field.type === 'json' ? 3 : 2)\"\n                              [ngModel]=\"getCommandActionFieldValue(field)\"\n                              (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                              [ngModelOptions]=\"{ standalone: true }\"\n                              [placeholder]=\"field.placeholder || (field.type === 'json' ? '{ }' : '')\"\n                              [required]=\"isCommandActionFieldRequired(field)\"\n                            ></textarea>\n                          } @else {\n                            @if (field.type === 'select') {\n                              <mat-select\n                                [ngModel]=\"getCommandActionFieldValue(field)\"\n                                (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                [required]=\"isCommandActionFieldRequired(field)\"\n                                >\n                                @for (option of field.options || []; track option) {\n                                  <mat-option [value]=\"option.value\">\n                                    {{ option.label }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input\n                                matInput\n                                [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                                [ngModel]=\"getCommandActionFieldValue(field)\"\n                                (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                [placeholder]=\"field.placeholder || ''\"\n                                [required]=\"isCommandActionFieldRequired(field)\"\n                                />\n                            }\n                          }\n                          @if (field.hint) {\n                            <mat-hint>{{ field.hint }}</mat-hint>\n                          }\n                          @if (hasCommandActionFieldError(field.key)) {\n                            <mat-error>\n                              {{ getCommandActionFieldError(field.key) }}\n                            </mat-error>\n                          }\n                          @if (!hasCommandActionFieldError(field.key) && isCommandActionFieldMissing(field)) {\n                            <mat-error>\n                              {{ tx('config.commandRules.validation.requiredField', 'Campo obrigat\u00F3rio.') }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      }\n                    }\n                  }\n                } @else {\n                  <praxis-surface-open-action-editor\n                    class=\"command-rules-surface-editor\"\n                    data-testid=\"form-command-rule-surface-open-editor\"\n                    [value]=\"commandRuleSurfaceOpenPayload\"\n                    hostKind=\"dynamic-form\"\n                    (valueChange)=\"onCommandSurfaceOpenPayloadChange($event)\"\n                  ></praxis-surface-open-action-editor>\n                }\n              </div>\n            }\n\n            <mat-form-field appearance=\"fill\" class=\"command-rules-full\">\n              <mat-label>{{ tx('config.commandRules.advancedPayload.label', 'Payload JSON avan\u00E7ado') }}</mat-label>\n              <textarea\n                matInput\n                rows=\"4\"\n                [(ngModel)]=\"commandRulePayloadJson\"\n                [attr.aria-label]=\"tx('config.commandRules.advancedPayload.ariaLabel', 'Payload JSON da a\u00E7\u00E3o global')\"\n              ></textarea>\n            </mat-form-field>\n\n            <div class=\"command-rules-options\">\n              <mat-slide-toggle [(ngModel)]=\"commandRuleDistinct\">{{ tx('config.commandRules.options.distinct', 'Evitar repeti\u00E7\u00E3o enquanto a condi\u00E7\u00E3o permanecer verdadeira') }}</mat-slide-toggle>\n              <mat-slide-toggle [(ngModel)]=\"commandRuleRunOnInitialEvaluation\">{{ tx('config.commandRules.options.runOnInitialEvaluation', 'Executar tamb\u00E9m na avalia\u00E7\u00E3o inicial') }}</mat-slide-toggle>\n            </div>\n\n            @if (commandRuleAuthoringError) {\n              <div class=\"preview-error command-rules-full\">\n                <mat-icon aria-hidden=\"true\">warning</mat-icon>\n                <span>{{ commandRuleAuthoringError }}</span>\n              </div>\n            }\n\n            <div\n              class=\"command-rule-preview command-rules-full\"\n              [class.command-rule-preview--invalid]=\"commandRulePreview.state === 'invalid'\"\n              data-testid=\"command-rule-preview\"\n              >\n              <div class=\"command-rules-section-title\">{{ tx('config.commandRules.preview.title', 'Preview do comando') }}</div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.mode', 'Modo') }}</span>\n                <strong>{{ commandRulePreview.executionMode }}</strong>\n              </div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.action', 'A\u00E7\u00E3o') }}</span>\n                <strong>{{ commandRulePreview.actionId || '\u2014' }}</strong>\n              </div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.policy', 'Policy') }}</span>\n                <code>{{ commandRulePreview.policy | json }}</code>\n              </div>\n              @if (commandRulePreview.diagnostics.length) {\n                <div class=\"command-rule-preview__diagnostics\">\n                  <mat-icon aria-hidden=\"true\">{{ commandRulePreview.state === 'invalid' ? 'warning' : 'visibility' }}</mat-icon>\n                  <span>{{ commandRulePreview.diagnostics[0] }}</span>\n                </div>\n              }\n            </div>\n\n            <div class=\"command-rules-actions\">\n              <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"applyCommandRule()\">\n                <mat-icon aria-hidden=\"true\">check</mat-icon>\n                {{ tx('config.commandRules.actions.apply', 'Aplicar comando') }}\n              </button>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('cascades')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-cascatas\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.cascades.title', 'Depend\u00EAncias entre campos') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.cascades.subtitle', 'Configure cascatas e carregamento entre campos.') }}</p>\n            </div>\n          </div>\n          <praxis-cascade-manager-tab [fields]=\"editedConfig.fieldMetadata || []\"\n          (apply)=\"onCascadeApply($event)\"></praxis-cascade-manager-tab>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('messages')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-mensagens\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.messages.title', 'Mensagens e feedback') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.messages.subtitle', 'Padronize textos de sucesso, erro e confirma\u00E7\u00F5es.') }}</p>\n            </div>\n          </div>\n          <praxis-messages-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-messages-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('navigation')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-navegacao\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.navigation.title', 'Navega\u00E7\u00E3o de retorno') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.navigation.subtitle', 'Defina o comportamento do bot\u00E3o Voltar em fluxos CRUD.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.navigation.returnTo.label', 'Rota de retorno') }}</mat-label>\n                <input matInput id=\"returnTo\" [(ngModel)]=\"backConfig!.returnTo\" (ngModelChange)=\"onBackConfigChange()\" [placeholder]=\"tx('config.navigation.returnTo.placeholder', '/funcionarios')\" />\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-slide-toggle [(ngModel)]=\"backConfig!.confirmOnDirty\" (ngModelChange)=\"onBackConfigChange()\">\n                {{ tx('config.navigation.confirmOnDirty.label', 'Confirmar ao sair com altera\u00E7\u00F5es') }}\n              </mat-slide-toggle>\n            </div>\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isBackConfigBlockPersisted()\">\n              <strong>{{ tx('config.navigation.backConfig.label', 'Back Config') }}</strong>\n              @if (isBackConfigBlockPersisted()) {\n                <span>{{ tx('config.navigation.backConfig.persisted', '`contextSnapshot.backConfig` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.navigation.backConfig.implicit', 'Bloco ausente no documento can\u00F4nico. Os valores exibidos s\u00E3o fallback visual e n\u00E3o ser\u00E3o salvos at\u00E9 voc\u00EA editar.') }}\n              }\n            </div>\n          </div>\n          <div class=\"section-help\">\n            <span class=\"section-help__label\">{{ tx('config.navigation.note.label', 'Observa\u00E7\u00E3o:') }}</span>\n            <button\n              mat-icon-button\n              class=\"help-icon-button\"\n              type=\"button\"\n              [matTooltip]=\"tx('config.navigation.note.tooltip', 'Afeta o fluxo de navega\u00E7\u00E3o do CRUD e pode ser sobreposto por metadados do recurso.')\"\n              matTooltipPosition=\"above\"\n              >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('json')\">\n    <div class=\"tab-content json-tab-content\" data-testid=\"config-tab-panel-json\">\n      <mat-card class=\"section-card section-card--json\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.json.title', 'Configura\u00E7\u00E3o JSON') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.json.subtitle', 'Edi\u00E7\u00E3o avan\u00E7ada do documento can\u00F4nico de autoria do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <form-json-config-editor [document]=\"jsonDocument\" (documentChange)=\"onJsonConfigChange($event)\"\n            (validationChange)=\"onJsonValidationChange($event)\" (editorEvent)=\"onJsonEditorEvent($event)\">\n          </form-json-config-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0}.mobile-tab-selector{display:none;flex:0 0 auto;padding:8px 16px 0;background:var(--md-sys-color-surface)}.mobile-tab-selector__field{width:100%}.config-tabs{flex:1 1 auto;min-height:0;min-width:0}::ng-deep .mat-mdc-tab-group.config-tabs{display:flex;flex-direction:column}::ng-deep .mat-mdc-tab-group.config-tabs .mat-mdc-tab-body-wrapper{flex:1;min-height:0;min-width:0}::ng-deep .mat-mdc-tab-group.config-tabs .mat-mdc-tab-body-content{height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:0!important}.tab-content{padding:16px 20px 20px;flex:1;min-width:0;box-sizing:border-box}.json-tab-content{min-width:0;padding:12px 16px 16px}.section-card--json{display:flex;flex:1;min-height:calc(100vh - 180px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}.section-card--json>mat-card-content{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column}.section-card--json form-json-config-editor{display:block;flex:1;min-width:0;min-height:0}.form-row{display:block;margin-bottom:12px}.form-grid{display:grid;gap:12px}.section-help{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px}.section-help__label{font-weight:500}.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}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.grid-2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.grid-2-cols--compact{gap:12px}.w-100{width:100%}.visual-builder-content{padding:0!important;height:100%;min-width:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px}.visual-builder-content>praxis-visual-builder{flex:0 0 auto;min-width:0;min-height:clamp(360px,48vh,560px)}.visual-builder-content>praxis-rule-properties-panel{flex:0 0 auto;display:block;min-width:0;padding:0 16px 24px;box-sizing:border-box}.rules-diagnostics{flex:0 0 auto;display:grid;gap:10px;padding:12px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}.rules-diagnostics--empty{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.rules-diagnostics__summary,.rules-diagnostics__list{display:flex;flex-wrap:wrap;gap:8px}.rules-diagnostics__pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);font-size:12px;font-weight:600}.rules-diagnostics__pill--warn{background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 72%,transparent);color:var(--md-sys-color-on-tertiary-container)}.rules-diagnostics__pill--error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.rules-diagnostics__item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:min(100%,280px);padding:8px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.rules-diagnostics__item>div{display:grid;gap:2px;min-width:0}.rules-diagnostics__item strong{color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rules-diagnostics__item span{color:var(--md-sys-color-on-surface-variant);font-size:11px}.rules-diagnostics__actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}.rules-diagnostics__details{display:grid;gap:2px;margin:4px 0 0;padding-left:16px;color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35}.rules-diagnostics__details li{overflow-wrap:anywhere}.rules-diagnostics__item--warn{border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 52%,var(--md-sys-color-outline-variant))}.rules-diagnostics__item--error{border-color:var(--md-sys-color-error)}.rules-diagnostics__status{font-weight:600;margin-top:1px}.rules-diagnostics__action{min-width:0;height:28px;padding:0 10px;border-radius:999px;font-size:12px;line-height:1}.rules-diagnostics__action mat-icon{width:16px;height:16px;margin:0 4px 0 0;font-size:16px}.json-field{width:100%}.presentation-layout{display:flex;gap:20px;align-items:flex-start}.presentation-controls{flex:1 1 60%;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px}.control{display:flex;flex-direction:column}.control-span{grid-column:1/-1}.block-status{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 35%,transparent);color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.45}.block-status strong{min-width:112px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.block-status--implicit{background:color-mix(in srgb,var(--md-sys-color-surface-variant) 42%,transparent);border:1px dashed var(--md-sys-color-outline)}.block-status--readonly{margin-bottom:12px}.block-status code{font-family:var(--md-ref-typeface-mono, \"Courier New\", monospace);font-size:11px}.control__label{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-bottom:6px}.toggle-group{width:100%}.control--inline{grid-column:1/-1;display:flex;gap:16px;align-items:center}.presentation-preview{flex:0 0 360px;position:sticky;top:16px}.preview-card{border:1px solid var(--md-sys-color-outline);border-radius:12px;padding:14px;background:var(--md-sys-color-surface-container)}.preview-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.preview-row:last-child{border-bottom:none}.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}.presentation-preview .praxis-presentation__label{color:var(--md-sys-color-on-surface-variant)}.presentation-preview .praxis-presentation__value{color:var(--md-sys-color-on-surface)}.presentation-preview .presentation-mode.pres-density-cozy .preview-row{padding:6px 0}.presentation-preview .presentation-mode.pres-density-compact .preview-row,.presentation-preview .presentation-mode.pres-compact .preview-row{padding:2px 0}.presentation-preview .presentation-mode.pres-label-left .preview-row{display:grid;grid-template-columns:var(--pfx-pres-label-width, 140px) 1fr;align-items:baseline;column-gap:10px}.presentation-preview .presentation-mode.pres-label-left .praxis-presentation__label{margin:0;text-align:var(--pfx-pres-label-align, start)}.presentation-preview .presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-preview h4{margin:0 0 8px;color:var(--md-sys-color-on-surface);font-size:1rem}.section-card{border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-level1, none)}.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.tab-content--dense{padding:12px 16px 16px}.tab-content--dense .section-header,.tab-content--dense .form-row{margin-bottom:8px}.section-header h3{margin:0;font-size:1.05rem;color:var(--md-sys-color-on-surface)}.text-caption{margin:6px 0 0;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.section-header--compact{margin-bottom:8px}.section-body{display:block}.section-body--flex{flex:1;min-height:0;display:flex;flex-direction:column}.builder-header{padding:12px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.builder-header h3{margin:0;font-size:1rem;color:var(--md-sys-color-on-surface)}.hint{margin:8px 0 0;padding:10px 12px;border-radius:10px;border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}.meta-card{display:grid;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.meta-row strong{color:var(--md-sys-color-on-surface);font-weight:600}.runtime-contract-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.runtime-contract-field{display:grid;gap:6px;padding:12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.runtime-contract-label{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.runtime-contract-code{display:block;font-family:var(--md-ref-typeface-mono, \"Courier New\", monospace);font-size:12px;line-height:1.45;color:var(--md-sys-color-on-surface);word-break:break-word;white-space:normal}.command-rules-card{margin:16px;min-width:0;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container)}.command-rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;align-items:start;min-width:0}.command-rules-toolbar,.command-rules-options,.command-rules-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.command-rules-select{min-width:min(320px,100%)}.command-rules-full{grid-column:1/-1}.command-rule-condition-builder{min-height:420px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.command-rules-payload-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;min-width:0;padding:12px;border:1px dashed var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.command-rules-section-title{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase}.command-rules-surface-editor{grid-column:1/-1}.command-rule-preview{display:grid;gap:8px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface)}.command-rule-preview--invalid{border-color:var(--md-sys-color-error)}.command-rule-preview__row{display:grid;grid-template-columns:minmax(96px,.35fr) minmax(0,1fr);gap:8px;align-items:start;min-width:0}.command-rule-preview__row span{color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:600}.command-rule-preview__row strong,.command-rule-preview__row code{min-width:0;overflow-wrap:anywhere}.command-rule-preview__diagnostics{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant)}@media(max-width:768px){.mobile-tab-selector{display:block}::ng-deep .mat-mdc-tab-group.config-tabs>.mat-mdc-tab-header{display:none}.tab-content{padding:12px}.json-tab-content{padding:8px}.section-card--json{min-height:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i7$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: MatCheckboxModule }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$2.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: MatButtonToggleModule }, { kind: "directive", type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: JsonConfigEditorComponent, selector: "form-json-config-editor", inputs: ["config", "document"], outputs: ["configChange", "documentChange", "validationChange", "editorEvent"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-layout-editor", inputs: ["config"], outputs: ["configChange", "select"] }, { kind: "component", type: BehaviorEditorComponent, selector: "praxis-behavior-editor", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: ActionsEditorComponent$1, selector: "praxis-actions-editor", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: MessagesEditorComponent, selector: "praxis-messages-editor", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HooksEditorComponent, selector: "praxis-hooks-editor", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: RulePropertiesPanelComponent, selector: "praxis-rule-properties-panel", inputs: ["rules", "visualBlockNodes"], outputs: ["rulesChange"] }, { kind: "component", type: PraxisVisualBuilder, selector: "praxis-visual-builder", inputs: ["mode", "config", "initialRules", "initialCondition"], outputs: ["rulesChanged", "conditionChanged", "exportRequested", "importRequested"] }, { kind: "component", type: CascadeManagerTabComponent, selector: "praxis-cascade-manager-tab", inputs: ["fields", "connections"], outputs: ["apply", "cancel"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisDynamicFormConfigEditor, isStandalone: true, selector: "praxis-dynamic-form-config-editor", providers: [FormConfigService], viewQueries: [{ propertyName: "jsonEditor", first: true, predicate: JsonConfigEditorComponent, descendants: true }, { propertyName: "cascadeManager", first: true, predicate: CascadeManagerTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"mobile-tab-selector\">\n  <mat-form-field appearance=\"outline\" class=\"mobile-tab-selector__field\">\n    <mat-label>{{ tx('config.tabs.mobileLabel', 'Se\u00E7\u00E3o do editor') }}</mat-label>\n    <mat-select [(ngModel)]=\"selectedConfigTabIndex\" data-testid=\"dynamic-form-config-editor-mobile-tabs\">\n      @for (tab of configTabOptions; track tab.key) {\n        <mat-option [value]=\"tab.index\">{{ tab.label }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-tab-group class=\"config-tabs\" data-testid=\"dynamic-form-config-editor-tabs\" [(selectedIndex)]=\"selectedConfigTabIndex\">\n  <mat-tab [label]=\"configTabLabel('general')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-geral\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.general.title', 'Dados do formul\u00E1rio') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.general.subtitle', 'Defina o modo de dados e o contexto de edi\u00E7\u00E3o.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.general.inputMode.label', 'Modo de dados') }}</mat-label>\n                <mat-select [(ngModel)]=\"inputMode\" (ngModelChange)=\"onInputModeChange()\">\n                  <mat-option value=\"create\">{{ tx('config.general.inputMode.create', 'create') }}</mat-option>\n                  <mat-option value=\"edit\">{{ tx('config.general.inputMode.edit', 'edit') }}</mat-option>\n                  <mat-option value=\"view\">{{ tx('config.general.inputMode.view', 'view') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isBindingsBlockPersisted()\">\n              <strong>{{ tx('config.general.bindings.label', 'Bindings') }}</strong>\n              @if (isBindingsBlockPersisted()) {\n                <span>{{ tx('config.general.bindings.persisted', '`bindings.mode` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.general.bindings.implicit', 'Bloco ausente no documento can\u00F4nico. O valor exibido \u00E9 fallback visual e n\u00E3o ser\u00E1 salvo at\u00E9 voc\u00EA editar este campo.') }}\n              }\n            </div>\n            <div class=\"section-help\">\n              <span class=\"section-help__label\">{{ tx('config.common.understand', 'Entenda:') }}</span>\n              <button\n                praxisIconButton=\"help_outline\"\n                size=\"dense\"\n                class=\"help-icon-button\"\n                type=\"button\"\n                [matTooltip]=\"tx('config.general.inputMode.tooltip', 'O mode controla o fluxo (create/edit/view). enableCustomization s\u00F3 libera edi\u00E7\u00E3o do layout e n\u00E3o altera o mode.')\"\n                matTooltipPosition=\"above\"\n                >\n              </button>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n\n      @if (hasResolvedRuntimeContract()) {\n        <mat-card\n          class=\"section-card\"\n          data-testid=\"config-tab-runtime-contract\"\n          >\n          <mat-card-content>\n            <div class=\"section-header\">\n              <div>\n                <h3>{{ tx('config.general.runtimeContract.title', 'Contrato Runtime Resolvido') }}</h3>\n                <p class=\"text-caption\">\n                  {{ tx('config.general.runtimeContract.subtitle', 'Visualiza\u00E7\u00E3o somente leitura do contrato backend resolvido pelo host atual.') }}\n                </p>\n              </div>\n            </div>\n            <div class=\"block-status block-status--readonly\">\n              <strong>{{ tx('config.general.runtimeContract.runtimeLabel', 'Runtime') }}</strong>\n              <span>\n                {{ tx('config.general.runtimeContract.readonly', 'Esses valores v\u00EAm do host/runtime atual e n\u00E3o s\u00E3o persistidos em `bindings` nem em `contextSnapshot`.') }}\n              </span>\n            </div>\n            <div class=\"runtime-contract-grid\">\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.schemaUrl', 'Schema URL') }}</span>\n                <code class=\"runtime-contract-code\">{{ runtimeContract?.schemaUrl || '\u2014' }}</code>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.schemaSource', 'Origem do schema') }}</span>\n                <strong>{{ describeRuntimeSource(runtimeContract?.schemaSource) }}</strong>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitMethod', 'Submit method') }}</span>\n                <strong>{{ runtimeContract?.submitMethod || '\u2014' }}</strong>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitUrl', 'Submit URL') }}</span>\n                <code class=\"runtime-contract-code\">{{ runtimeContract?.submitUrl || '\u2014' }}</code>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitSource', 'Origem do submit') }}</span>\n                <strong>{{ describeRuntimeSource(runtimeContract?.submitSource) }}</strong>\n              </div>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      }\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('schema')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-schema\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.schema.title', 'Valida\u00E7\u00E3o de schema') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.schema.subtitle', 'Controle avisos quando o schema do servidor mudar.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.schema.notify.label', 'Notificar quando desatualizado') }}</mat-label>\n                <mat-select [(ngModel)]=\"schemaPrefs.notifyIfOutdated\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-notify')\">\n                  <mat-option value=\"both\">{{ tx('config.schema.notify.both', 'Banner + Snackbar') }}</mat-option>\n                  <mat-option value=\"inline\">{{ tx('config.schema.notify.inline', 'Somente Banner') }}</mat-option>\n                  <mat-option value=\"snackbar\">{{ tx('config.schema.notify.snackbar', 'Somente Snackbar') }}</mat-option>\n                  <mat-option value=\"none\">{{ tx('config.schema.notify.none', 'Nenhum') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.schema.snooze.label', 'Intervalo de sil\u00EAncio (ms)') }}</mat-label>\n                <input matInput type=\"number\" [(ngModel)]=\"schemaPrefs.snoozeMs\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-snooze')\" />\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-slide-toggle [(ngModel)]=\"schemaPrefs.autoOpenSettingsOnOutdated\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-auto-open')\">\n                {{ tx('config.schema.autoOpenSettings', 'Abrir configura\u00E7\u00F5es automaticamente') }}\n              </mat-slide-toggle>\n            </div>\n            @if (serverMeta) {\n              <div class=\"form-row\">\n                <div class=\"meta-card\">\n                  <div class=\"meta-row\">\n                    <span>{{ tx('config.schema.meta.serverHash', 'Server hash') }}</span>\n                    <strong>{{ serverMeta.serverHash || '\u2014' }}</strong>\n                  </div>\n                  <div class=\"meta-row\">\n                    <span>{{ tx('config.schema.meta.lastVerifiedAt', '\u00DAltima verifica\u00E7\u00E3o') }}</span>\n                    <strong>{{ serverMeta.lastVerifiedAt || '\u2014' }}</strong>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isSchemaPrefsBlockPersisted()\">\n              <strong>{{ tx('config.schema.prefs.label', 'Schema Prefs') }}</strong>\n              @if (isSchemaPrefsBlockPersisted()) {\n                <span>{{ tx('config.schema.prefs.persisted', '`contextSnapshot.schemaPrefs` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.schema.prefs.implicit', 'Bloco ausente no documento can\u00F4nico. Os controles exibem fallback visual e n\u00E3o ser\u00E3o salvos at\u00E9 voc\u00EA editar.') }}\n              }\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('layout')\">\n    <div class=\"tab-content tab-content--full\" data-testid=\"config-tab-panel-layout\">\n      <div class=\"section-header section-header--compact\">\n        <div>\n          <h3>{{ tx('config.layout.title', 'Layout do formul\u00E1rio') }}</h3>\n          <p class=\"text-caption\">{{ tx('config.layout.subtitle', 'Organize se\u00E7\u00F5es, linhas e campos com drag & drop.') }}</p>\n        </div>\n      </div>\n      <div class=\"section-body section-body--flex\">\n        <praxis-layout-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"\n        (select)=\"onLayoutSelect($event)\"></praxis-layout-editor>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('hooks')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-hooks\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.hooks.title', 'Hooks de ciclo de vida') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.hooks.subtitle', 'Automatize a\u00E7\u00F5es nos eventos do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <praxis-hooks-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-hooks-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  @if (isPresentationMode) {\n    <mat-tab [label]=\"configTabLabel('presentation')\">\n      <div class=\"tab-content\" data-testid=\"config-tab-panel-presentation\">\n        <mat-card class=\"section-card\">\n          <mat-card-content>\n            <div class=\"section-header\">\n              <div>\n                <h3>{{ tx('config.presentation.title', 'Modo Apresenta\u00E7\u00E3o') }}</h3>\n                <p class=\"text-caption\">{{ tx('config.presentation.subtitle', 'Configura\u00E7\u00F5es de exibi\u00E7\u00E3o aplicadas somente ao modo apresenta\u00E7\u00E3o.') }}</p>\n              </div>\n            </div>\n            <div class=\"presentation-layout\">\n              <div class=\"presentation-controls\">\n                <div class=\"block-status control-span\" [class.block-status--implicit]=\"!isPresentationBlockPersisted()\">\n                  <strong>{{ tx('config.presentation.block.label', 'Presentation') }}</strong>\n                  @if (isPresentationBlockPersisted()) {\n                    <span>{{ tx('config.presentation.block.persisted', '`contextSnapshot.presentation` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n                  } @else {\n                    {{ tx('config.presentation.block.implicit', 'Bloco ausente no documento can\u00F4nico. A pr\u00E9-visualiza\u00E7\u00E3o usa fallback local e n\u00E3o ser\u00E1 salva at\u00E9 voc\u00EA editar.') }}\n                  }\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.labelPosition.label', 'Posi\u00E7\u00E3o do r\u00F3tulo') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.labelPosition\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-position')\" [attr.aria-label]=\"tx('config.presentation.labelPosition.ariaLabel', 'Posi\u00E7\u00E3o do r\u00F3tulo')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"above\">\n                      <mat-icon>view_stream</mat-icon>\n                      <span class=\"sr-only\">{{ tx('config.presentation.labelPosition.above', 'Acima') }}</span>\n                    </mat-button-toggle>\n                    <mat-button-toggle value=\"left\">\n                      <mat-icon>view_column</mat-icon>\n                      <span class=\"sr-only\">{{ tx('config.presentation.labelPosition.left', '\u00C0 esquerda') }}</span>\n                    </mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.density.label', 'Densidade') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.density\" (ngModelChange)=\"onPresentationPrefsChange('presentation-density')\" [attr.aria-label]=\"tx('config.presentation.density.ariaLabel', 'Densidade')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"comfortable\">{{ tx('config.presentation.density.comfortable', 'Confort\u00E1vel') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"cozy\">{{ tx('config.presentation.density.cozy', 'Intermedi\u00E1ria') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"compact\">{{ tx('config.presentation.density.compact', 'Compacta') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.labelAlign.label', 'Alinhamento do r\u00F3tulo') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.labelAlign\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-align')\" [attr.aria-label]=\"tx('config.presentation.labelAlign.ariaLabel', 'Alinhamento do r\u00F3tulo')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"start\"><mat-icon>format_align_left</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"center\"><mat-icon>format_align_center</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"end\"><mat-icon>format_align_right</mat-icon></mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.valueAlign.label', 'Alinhamento do valor') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.valueAlign\" (ngModelChange)=\"onPresentationPrefsChange('presentation-value-align')\" [attr.aria-label]=\"tx('config.presentation.valueAlign.ariaLabel', 'Alinhamento do valor')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"start\"><mat-icon>format_align_left</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"center\"><mat-icon>format_align_center</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"end\"><mat-icon>format_align_right</mat-icon></mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.labelFontSize.label', 'Tamanho do r\u00F3tulo') }}</mat-label>\n                    <input matInput type=\"number\" min=\"10\" [(ngModel)]=\"presentationPrefs.labelFontSize\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-font-size')\"\n                      [placeholder]=\"tx('config.presentation.labelFontSize.placeholder', 'ex.: 12')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.valueFontSize.label', 'Tamanho do valor') }}</mat-label>\n                    <input matInput type=\"number\" min=\"10\" [(ngModel)]=\"presentationPrefs.valueFontSize\" (ngModelChange)=\"onPresentationPrefsChange('presentation-value-font-size')\"\n                      [placeholder]=\"tx('config.presentation.valueFontSize.placeholder', 'ex.: 16')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.labelWidth.label', 'Largura do r\u00F3tulo (label \u00E0 esquerda)') }}</mat-label>\n                    <input matInput type=\"number\" min=\"60\" [(ngModel)]=\"presentationPrefs.labelWidth\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-width')\"\n                      [placeholder]=\"tx('config.presentation.labelWidth.placeholder', 'ex.: 140')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control control--inline\">\n                  <mat-slide-toggle [(ngModel)]=\"presentationPrefs.compact\" (ngModelChange)=\"onPresentationPrefsChange('presentation-compact')\">\n                    {{ tx('config.presentation.options.compactMode', 'Modo compacto') }}\n                  </mat-slide-toggle>\n                  <mat-checkbox [(ngModel)]=\"truncatePreview\">\n                    {{ tx('config.presentation.options.truncateValues', 'Truncar valores') }}\n                  </mat-checkbox>\n                </div>\n              </div>\n              <div class=\"presentation-preview\">\n                <h4>{{ tx('config.presentation.preview.title', 'Pr\u00E9-visualiza\u00E7\u00E3o') }}</h4>\n                <div class=\"preview-card\">\n                <div class=\"praxis-dynamic-form presentation-mode\" [ngClass]=\"{\n                           'pres-compact': !!presentationPrefs.compact,\n                           'pres-label-left': presentationPrefs.labelPosition === 'left',\n                           'pres-label-above': presentationPrefs.labelPosition === 'above',\n                           'pres-density-compact': presentationPrefs.density === 'compact',\n                           'pres-density-cozy': presentationPrefs.density === 'cozy'\n                         }\" [style.--pfx-pres-label-size]=\"(presentationPrefs.labelFontSize || 12) + 'px'\"\n                    [style.--pfx-pres-value-size]=\"(presentationPrefs.valueFontSize || 16) + 'px'\"\n                    [style.--pfx-pres-label-width]=\"(presentationPrefs.labelWidth || 140) + 'px'\"\n                    [style.--pfx-pres-label-align]=\"presentationPrefs.labelAlign || 'start'\"\n                    [style.--pfx-pres-value-align]=\"presentationPrefs.valueAlign || 'start'\">\n                    @for (item of previewItems; track item) {\n                      <div class=\"preview-row\">\n                        <span class=\"praxis-presentation__label\">{{ item.label }}</span>\n                        <span class=\"praxis-presentation__value\" [title]=\"truncatePreview ? item.value : null\"\n                          [style.maxWidth]=\"truncatePreview ? '280px' : null\"\n                          [style.overflow]=\"truncatePreview ? 'hidden' : null\"\n                          [style.textOverflow]=\"truncatePreview ? 'ellipsis' : null\"\n                          [style.whiteSpace]=\"truncatePreview ? 'nowrap' : 'normal'\">\n                          {{ item.value }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"section-help\">\n              <span class=\"section-help__label\">{{ tx('config.common.understand', 'Entenda:') }}</span>\n              <button\n                praxisIconButton=\"help_outline\"\n                size=\"dense\"\n                class=\"help-icon-button\"\n                type=\"button\"\n                [matTooltip]=\"tx('config.presentation.help.tooltip', 'Ajustes aplicam somente ao Modo Apresenta\u00E7\u00E3o e s\u00E3o salvos por formul\u00E1rio (via CSS/Classes).')\"\n                matTooltipPosition=\"above\"\n                >\n              </button>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </mat-tab>\n  }\n  <mat-tab [label]=\"configTabLabel('behavior')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-comportamento\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.behavior.title', 'Comportamento') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.behavior.subtitle', 'Ajuste valida\u00E7\u00F5es e respostas do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <praxis-behavior-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-behavior-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('hints')\">\n    <div class=\"tab-content tab-content--dense\" data-testid=\"config-tab-panel-hints\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.hints.title', 'Dicas dos modos') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.hints.subtitle', 'Personalize textos de apoio para modos de dados e estados de UI.') }}</p>\n            </div>\n          </div>\n          <p class=\"text-caption\">{{ tx('config.hints.description', 'Personalize os textos usados como tooltip/hint para modos de dados e modos globais de UI.') }}</p>\n\n          <div class=\"grid-2-cols grid-2-cols--compact\">\n            <section>\n              <h4>{{ tx('config.hints.dataModes.title', 'Modos de dados') }}</h4>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.create.label', 'Criar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.create\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-create')\" [placeholder]=\"tx('config.hints.dataModes.create.placeholder', 'Ex.: Preencha os campos obrigat\u00F3rios.')\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.edit.label', 'Editar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.edit\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-edit')\" [placeholder]=\"tx('config.hints.dataModes.edit.placeholder', 'Ex.: Revise os dados antes de salvar.')\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.view.label', 'Visualizar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.view\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-view')\" [placeholder]=\"tx('config.hints.dataModes.view.placeholder', 'Ex.: Visualiza\u00E7\u00E3o somente leitura.')\" />\n              </mat-form-field>\n            </section>\n\n            <section>\n              <h4>{{ tx('config.hints.uiModes.title', 'Modos de UI') }}</h4>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.presentation.label', 'Apresenta\u00E7\u00E3o') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.presentation\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-presentation')\" [placeholder]=\"tx('config.hints.uiModes.presentation.placeholder', 'Ex.: Modo compacto para leitura r\u00E1pida.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.readonly.label', 'Leitura (readonly)') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.readonly\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-readonly')\" [placeholder]=\"tx('config.hints.uiModes.readonly.placeholder', 'Ex.: Campos bloqueados para edi\u00E7\u00E3o.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.disabled.label', 'Desabilitado') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.disabled\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-disabled')\" [placeholder]=\"tx('config.hints.uiModes.disabled.placeholder', 'Ex.: Fun\u00E7\u00E3o indispon\u00EDvel no momento.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.visible.label', 'Vis\u00EDvel') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.visible\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-visible')\" [placeholder]=\"tx('config.hints.uiModes.visible.placeholder', 'Ex.: Campo exibido conforme permiss\u00F5es.')\"></textarea>\n              </mat-form-field>\n            </section>\n          </div>\n\n          <section>\n            <h4>{{ tx('config.helpPresentation.title', 'Apresenta\u00E7\u00E3o das ajudas dos campos') }}</h4>\n            <p class=\"text-caption\">{{ tx('config.helpPresentation.description', 'Controle como hint/helpText dos campos aparece em formul\u00E1rios densos. Erros de valida\u00E7\u00E3o continuam inline.') }}</p>\n            <div class=\"grid-3-cols\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.display.label', 'Exibi\u00E7\u00E3o') }}</mat-label>\n                <mat-select [ngModel]=\"helpPresentationDraft.display\" (ngModelChange)=\"onHelpPresentationDisplayChange($event)\">\n                  <mat-option value=\"inline\">{{ tx('config.helpPresentation.display.inline', 'Inline') }}</mat-option>\n                  <mat-option value=\"popover\">{{ tx('config.helpPresentation.display.popover', '\u00CDcone de ajuda') }}</mat-option>\n                  <mat-option value=\"auto\">{{ tx('config.helpPresentation.display.auto', 'Autom\u00E1tica') }}</mat-option>\n                  <mat-option value=\"hidden\">{{ tx('config.helpPresentation.display.hidden', 'Oculta') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.inlineMaxLength.label', 'Limite inline') }}</mat-label>\n                <input matInput type=\"number\" min=\"0\" [ngModel]=\"helpPresentationDraft.inlineMaxLength\"\n                  (ngModelChange)=\"onHelpPresentationInlineMaxLengthChange($event)\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.preferPopoverForControls.label', 'Preferir \u00EDcone em') }}</mat-label>\n                <input matInput [ngModel]=\"getHelpPreferPopoverControlsText()\"\n                  (ngModelChange)=\"onHelpPreferPopoverControlsChange($event)\"\n                  [placeholder]=\"tx('config.helpPresentation.preferPopoverForControls.placeholder', 'toggle, checkbox, select')\" />\n              </mat-form-field>\n            </div>\n          </section>\n\n          <div class=\"actions-row\">\n            <button mat-stroked-button color=\"primary\" type=\"button\" (click)=\"restoreHintsDefaults()\">\n              <mat-icon>restore</mat-icon>\n              {{ tx('config.hints.actions.restoreDefaults', 'Restaurar padr\u00F5es') }}\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('actions')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-acoes\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.actions.title', 'A\u00E7\u00F5es do formul\u00E1rio') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.actions.subtitle', 'Configure bot\u00F5es padr\u00E3o e a\u00E7\u00F5es customizadas.') }}</p>\n            </div>\n          </div>\n          <praxis-actions-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-actions-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('rules')\">\n    <div class=\"tab-content visual-builder-content\" data-testid=\"config-tab-panel-regras\">\n      <div class=\"builder-header\">\n        <div>\n          <h3>{{ tx('config.rules.title', 'Regras visuais') }}</h3>\n          <p class=\"text-caption\">{{ tx('config.rules.subtitle', 'Defina visibilidade, estilos e rea\u00E7\u00F5es baseadas em condi\u00E7\u00F5es.') }}</p>\n        </div>\n      </div>\n      @if (ruleDiagnostics.length) {\n        <div class=\"rules-diagnostics\" data-testid=\"rules-diagnostics-panel\">\n          <div class=\"rules-diagnostics__summary\">\n            <span class=\"rules-diagnostics__pill rules-diagnostics__pill--total\">\n              {{ tx('config.rules.summary.total', '{{count}} regras', { count: ruleDiagnosticsSummary.total }) }}\n            </span>\n            @if (ruleDiagnosticsSummary.invalid) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--error\">\n                {{ tx('config.rules.summary.invalid', '{{count}} inv\u00E1lidas', { count: ruleDiagnosticsSummary.invalid }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.unsupported) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.unsupported', '{{count}} com propriedades rejeitadas', { count: ruleDiagnosticsSummary.unsupported }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.runtimeOnly) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.runtimeOnly', '{{count}} runtime only', { count: ruleDiagnosticsSummary.runtimeOnly }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.pendingReview) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.pendingReview', '{{count}} pendentes de revis\u00E3o', { count: ruleDiagnosticsSummary.pendingReview }) }}\n              </span>\n            }\n          </div>\n          <div class=\"rules-diagnostics__list\" [attr.aria-label]=\"tx('config.rules.diagnostics.ariaLabel', 'Diagn\u00F3stico das regras')\">\n            @for (diagnostic of ruleDiagnostics; track diagnostic) {\n              <article class=\"rules-diagnostics__item\"\n                [class.rules-diagnostics__item--error]=\"getRuleStatusTone(diagnostic) === 'error'\"\n                [class.rules-diagnostics__item--warn]=\"getRuleStatusTone(diagnostic) === 'warn'\">\n                <div>\n                  <strong>{{ diagnostic.ruleName || diagnostic.ruleId }}</strong>\n                  <span>\n                    {{ tx('config.rules.diagnostics.targetConditionSummary', '{{targets}} alvo(s) \u00B7 {{conditions}} campo(s) na condi\u00E7\u00E3o', { targets: diagnostic.targetRefs.length, conditions: diagnostic.conditionRefs.length }) }}\n                  </span>\n                  @if (getRuleDiagnosticDetails(diagnostic).length) {\n                    <ul class=\"rules-diagnostics__details\">\n                      @for (detail of getRuleDiagnosticDetails(diagnostic); track detail) {\n                        <li>{{ detail }}</li>\n                      }\n                    </ul>\n                  }\n                </div>\n                <div class=\"rules-diagnostics__actions\">\n                  <span class=\"rules-diagnostics__status\">{{ getRuleStatusLabel(diagnostic) }}</span>\n                  @if (canApplyRulePropertyFix(diagnostic)) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [matTooltip]=\"tx('config.rules.actions.fix.tooltip', 'Aplicar whitelist e saneamento de propriedades nesta regra')\"\n                      (click)=\"applyRulePropertyFix(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                      {{ tx('config.rules.actions.fix', 'Corrigir') }}\n                    </button>\n                  }\n                  @if (diagnostic.status.includes('llm-generated-pending-review')) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [disabled]=\"!canAcceptPendingLlmRule(diagnostic)\"\n                      [matTooltip]=\"canAcceptPendingLlmRule(diagnostic) ? tx('config.rules.actions.accept.tooltip.ready', 'Aceitar sugest\u00E3o e atualizar estado visual') : tx('config.rules.actions.accept.tooltip.blocked', 'Corrija alvo, condi\u00E7\u00E3o e propriedades antes de aceitar')\"\n                      (click)=\"acceptPendingLlmRule(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">check</mat-icon>\n                      {{ tx('config.rules.actions.accept', 'Aceitar') }}\n                    </button>\n                  }\n                  @if (canOpenRuleJsonReview(diagnostic)) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [matTooltip]=\"tx('config.rules.actions.reviewJson.tooltip', 'Abrir a aba JSON para revisar esta regra sem convers\u00E3o visual')\"\n                      (click)=\"openRuleJsonReview(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">data_object</mat-icon>\n                      {{ tx('config.rules.actions.reviewJson', 'Ver JSON') }}\n                    </button>\n                  }\n                </div>\n              </article>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"rules-diagnostics rules-diagnostics--empty\" data-testid=\"rules-diagnostics-empty\">\n          {{ tx('config.rules.empty', 'Nenhuma regra definida ainda. Crie uma regra para ver alvos, condi\u00E7\u00E3o, propriedades e compatibilidade do builder.') }}\n        </div>\n      }\n      <praxis-visual-builder [config]=\"ruleBuilderConfig\" [initialRules]=\"ruleBuilderState\"\n      (rulesChanged)=\"onRulesChanged($event)\"></praxis-visual-builder>\n      <praxis-rule-properties-panel\n        [rules]=\"currentRules\"\n        [visualBlockNodes]=\"visualBlockNodeOptions\"\n        (rulesChange)=\"onRulePropertiesChanged($event)\"\n      ></praxis-rule-properties-panel>\n      <mat-card class=\"command-rules-card\" data-testid=\"form-command-rules-editor\">\n        <mat-card-title>{{ tx('config.commandRules.title', 'Comandos condicionais') }}</mat-card-title>\n        <mat-card-subtitle>{{ tx('config.commandRules.subtitle', 'Execute a\u00E7\u00F5es globais quando uma condi\u00E7\u00E3o do formul\u00E1rio for satisfeita.') }}</mat-card-subtitle>\n        <mat-card-content>\n          <div class=\"command-rules-grid\">\n            <div class=\"command-rules-toolbar\">\n              <mat-form-field appearance=\"fill\" class=\"command-rules-select\">\n                <mat-label>{{ tx('config.commandRules.command.label', 'Comando') }}</mat-label>\n                <mat-select [(ngModel)]=\"selectedCommandRuleId\" (selectionChange)=\"onCommandRuleSelectionChange()\">\n                  @for (rule of commandRules; track rule) {\n                    <mat-option [value]=\"rule.id\">\n                      {{ rule.id }}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <button mat-stroked-button type=\"button\" (click)=\"addCommandRule()\">\n                <mat-icon aria-hidden=\"true\">add</mat-icon>\n                {{ tx('config.commandRules.actions.add', 'Adicionar') }}\n              </button>\n              <button mat-stroked-button color=\"warn\" type=\"button\" (click)=\"deleteCommandRule()\" [disabled]=\"!selectedCommandRuleId\">\n                <mat-icon aria-hidden=\"true\">delete</mat-icon>\n                {{ tx('config.commandRules.actions.remove', 'Remover') }}\n              </button>\n            </div>\n\n            @if (selectedCommandRuleId) {\n              <div class=\"command-rule-condition-builder command-rules-full\">\n                <praxis-visual-builder\n                  mode=\"condition\"\n                  [config]=\"ruleBuilderConfig\"\n                  [initialCondition]=\"commandRuleCondition\"\n                  (conditionChanged)=\"onCommandConditionChanged($event)\"\n                ></praxis-visual-builder>\n              </div>\n            }\n\n            <mat-form-field appearance=\"fill\" class=\"command-rules-full\">\n              <mat-label>{{ tx('config.commandRules.conditionJson.label', 'Condi\u00E7\u00E3o JSON Logic') }}</mat-label>\n              <textarea\n                matInput\n                rows=\"5\"\n                [(ngModel)]=\"commandRuleConditionJson\"\n                [attr.aria-label]=\"tx('config.commandRules.conditionJson.ariaLabel', 'Condi\u00E7\u00E3o JSON Logic do comando condicional')\"\n              ></textarea>\n            </mat-form-field>\n\n            <mat-form-field appearance=\"fill\">\n              <mat-label>{{ tx('config.commandRules.globalAction.label', 'A\u00E7\u00E3o global') }}</mat-label>\n              <mat-select [(ngModel)]=\"commandRuleActionId\" (selectionChange)=\"onCommandActionChange()\">\n                @for (action of globalActionCatalog; track action) {\n                  <mat-option [value]=\"action.id\">\n                    {{ action.label || action.id }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n\n            <mat-form-field appearance=\"fill\">\n              <mat-label>{{ tx('config.commandRules.distinctBy.label', 'distinctBy') }}</mat-label>\n              <input matInput [(ngModel)]=\"commandRuleDistinctBy\" [placeholder]=\"tx('config.commandRules.distinctBy.placeholder', 'ex.: idade')\" />\n            </mat-form-field>\n\n            @if (commandRuleActionSchema; as actionSchema) {\n              <div\n                class=\"command-rules-payload-fields command-rules-full\"\n                >\n                <div class=\"command-rules-section-title\">{{ tx('config.commandRules.structuredPayload.title', 'Payload estruturado') }}</div>\n                @if (actionSchema.editorMode !== 'surface-open') {\n                  @for (field of actionSchema.fields; track field) {\n                    @if (shouldShowCommandActionField(field)) {\n                      @if (field.type === 'toggle') {\n                        <mat-slide-toggle\n                          [ngModel]=\"getCommandActionFieldValue(field)\"\n                          (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          >\n                          {{ field.label }}\n                        </mat-slide-toggle>\n                      } @else {\n                        <mat-form-field appearance=\"fill\">\n                          <mat-label>{{ field.label }}</mat-label>\n                          @if (field.type === 'textarea' || field.type === 'json') {\n                            <textarea\n                              matInput\n                              [rows]=\"field.rows || (field.type === 'json' ? 3 : 2)\"\n                              [ngModel]=\"getCommandActionFieldValue(field)\"\n                              (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                              [ngModelOptions]=\"{ standalone: true }\"\n                              [placeholder]=\"field.placeholder || (field.type === 'json' ? '{ }' : '')\"\n                              [required]=\"isCommandActionFieldRequired(field)\"\n                            ></textarea>\n                          } @else {\n                            @if (field.type === 'select') {\n                              <mat-select\n                                [ngModel]=\"getCommandActionFieldValue(field)\"\n                                (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                [required]=\"isCommandActionFieldRequired(field)\"\n                                >\n                                @for (option of field.options || []; track option) {\n                                  <mat-option [value]=\"option.value\">\n                                    {{ option.label }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input\n                                matInput\n                                [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                                [ngModel]=\"getCommandActionFieldValue(field)\"\n                                (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                [placeholder]=\"field.placeholder || ''\"\n                                [required]=\"isCommandActionFieldRequired(field)\"\n                                />\n                            }\n                          }\n                          @if (field.hint) {\n                            <mat-hint>{{ field.hint }}</mat-hint>\n                          }\n                          @if (hasCommandActionFieldError(field.key)) {\n                            <mat-error>\n                              {{ getCommandActionFieldError(field.key) }}\n                            </mat-error>\n                          }\n                          @if (!hasCommandActionFieldError(field.key) && isCommandActionFieldMissing(field)) {\n                            <mat-error>\n                              {{ tx('config.commandRules.validation.requiredField', 'Campo obrigat\u00F3rio.') }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      }\n                    }\n                  }\n                } @else {\n                  <praxis-surface-open-action-editor\n                    class=\"command-rules-surface-editor\"\n                    data-testid=\"form-command-rule-surface-open-editor\"\n                    [value]=\"commandRuleSurfaceOpenPayload\"\n                    hostKind=\"dynamic-form\"\n                    (valueChange)=\"onCommandSurfaceOpenPayloadChange($event)\"\n                  ></praxis-surface-open-action-editor>\n                }\n              </div>\n            }\n\n            <mat-form-field appearance=\"fill\" class=\"command-rules-full\">\n              <mat-label>{{ tx('config.commandRules.advancedPayload.label', 'Payload JSON avan\u00E7ado') }}</mat-label>\n              <textarea\n                matInput\n                rows=\"4\"\n                [(ngModel)]=\"commandRulePayloadJson\"\n                [attr.aria-label]=\"tx('config.commandRules.advancedPayload.ariaLabel', 'Payload JSON da a\u00E7\u00E3o global')\"\n              ></textarea>\n            </mat-form-field>\n\n            <div class=\"command-rules-options\">\n              <mat-slide-toggle [(ngModel)]=\"commandRuleDistinct\">{{ tx('config.commandRules.options.distinct', 'Evitar repeti\u00E7\u00E3o enquanto a condi\u00E7\u00E3o permanecer verdadeira') }}</mat-slide-toggle>\n              <mat-slide-toggle [(ngModel)]=\"commandRuleRunOnInitialEvaluation\">{{ tx('config.commandRules.options.runOnInitialEvaluation', 'Executar tamb\u00E9m na avalia\u00E7\u00E3o inicial') }}</mat-slide-toggle>\n            </div>\n\n            @if (commandRuleAuthoringError) {\n              <div class=\"preview-error command-rules-full\">\n                <mat-icon aria-hidden=\"true\">warning</mat-icon>\n                <span>{{ commandRuleAuthoringError }}</span>\n              </div>\n            }\n\n            <div\n              class=\"command-rule-preview command-rules-full\"\n              [class.command-rule-preview--invalid]=\"commandRulePreview.state === 'invalid'\"\n              data-testid=\"command-rule-preview\"\n              >\n              <div class=\"command-rules-section-title\">{{ tx('config.commandRules.preview.title', 'Preview do comando') }}</div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.mode', 'Modo') }}</span>\n                <strong>{{ commandRulePreview.executionMode }}</strong>\n              </div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.action', 'A\u00E7\u00E3o') }}</span>\n                <strong>{{ commandRulePreview.actionId || '\u2014' }}</strong>\n              </div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.policy', 'Policy') }}</span>\n                <code>{{ commandRulePreview.policy | json }}</code>\n              </div>\n              @if (commandRulePreview.diagnostics.length) {\n                <div class=\"command-rule-preview__diagnostics\">\n                  <mat-icon aria-hidden=\"true\">{{ commandRulePreview.state === 'invalid' ? 'warning' : 'visibility' }}</mat-icon>\n                  <span>{{ commandRulePreview.diagnostics[0] }}</span>\n                </div>\n              }\n            </div>\n\n            <div class=\"command-rules-actions\">\n              <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"applyCommandRule()\">\n                <mat-icon aria-hidden=\"true\">check</mat-icon>\n                {{ tx('config.commandRules.actions.apply', 'Aplicar comando') }}\n              </button>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('cascades')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-cascatas\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.cascades.title', 'Depend\u00EAncias entre campos') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.cascades.subtitle', 'Configure cascatas e carregamento entre campos.') }}</p>\n            </div>\n          </div>\n          <praxis-cascade-manager-tab [fields]=\"editedConfig.fieldMetadata || []\"\n          (apply)=\"onCascadeApply($event)\"></praxis-cascade-manager-tab>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('messages')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-mensagens\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.messages.title', 'Mensagens e feedback') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.messages.subtitle', 'Padronize textos de sucesso, erro e confirma\u00E7\u00F5es.') }}</p>\n            </div>\n          </div>\n          <praxis-messages-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-messages-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('navigation')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-navegacao\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.navigation.title', 'Navega\u00E7\u00E3o de retorno') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.navigation.subtitle', 'Defina o comportamento do bot\u00E3o Voltar em fluxos CRUD.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.navigation.returnTo.label', 'Rota de retorno') }}</mat-label>\n                <input matInput id=\"returnTo\" [(ngModel)]=\"backConfig!.returnTo\" (ngModelChange)=\"onBackConfigChange()\" [placeholder]=\"tx('config.navigation.returnTo.placeholder', '/funcionarios')\" />\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-slide-toggle [(ngModel)]=\"backConfig!.confirmOnDirty\" (ngModelChange)=\"onBackConfigChange()\">\n                {{ tx('config.navigation.confirmOnDirty.label', 'Confirmar ao sair com altera\u00E7\u00F5es') }}\n              </mat-slide-toggle>\n            </div>\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isBackConfigBlockPersisted()\">\n              <strong>{{ tx('config.navigation.backConfig.label', 'Back Config') }}</strong>\n              @if (isBackConfigBlockPersisted()) {\n                <span>{{ tx('config.navigation.backConfig.persisted', '`contextSnapshot.backConfig` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.navigation.backConfig.implicit', 'Bloco ausente no documento can\u00F4nico. Os valores exibidos s\u00E3o fallback visual e n\u00E3o ser\u00E3o salvos at\u00E9 voc\u00EA editar.') }}\n              }\n            </div>\n          </div>\n          <div class=\"section-help\">\n            <span class=\"section-help__label\">{{ tx('config.navigation.note.label', 'Observa\u00E7\u00E3o:') }}</span>\n            <button\n              praxisIconButton=\"help_outline\"\n              size=\"dense\"\n              class=\"help-icon-button\"\n              type=\"button\"\n              [matTooltip]=\"tx('config.navigation.note.tooltip', 'Afeta o fluxo de navega\u00E7\u00E3o do CRUD e pode ser sobreposto por metadados do recurso.')\"\n              matTooltipPosition=\"above\"\n              >\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('json')\">\n    <div class=\"tab-content json-tab-content\" data-testid=\"config-tab-panel-json\">\n      <mat-card class=\"section-card section-card--json\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.json.title', 'Configura\u00E7\u00E3o JSON') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.json.subtitle', 'Edi\u00E7\u00E3o avan\u00E7ada do documento can\u00F4nico de autoria do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <form-json-config-editor [document]=\"jsonDocument\" (documentChange)=\"onJsonConfigChange($event)\"\n            (validationChange)=\"onJsonValidationChange($event)\" (editorEvent)=\"onJsonEditorEvent($event)\">\n          </form-json-config-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0}.mobile-tab-selector{display:none;flex:0 0 auto;padding:8px 16px 0;background:var(--md-sys-color-surface)}.mobile-tab-selector__field{width:100%}.config-tabs{flex:1 1 auto;min-height:0;min-width:0}::ng-deep .mat-mdc-tab-group.config-tabs{display:flex;flex-direction:column}::ng-deep .mat-mdc-tab-group.config-tabs .mat-mdc-tab-body-wrapper{flex:1;min-height:0;min-width:0}::ng-deep .mat-mdc-tab-group.config-tabs .mat-mdc-tab-body-content{height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:0!important}.tab-content{padding:16px 20px 20px;flex:1;min-width:0;box-sizing:border-box}.json-tab-content{min-width:0;padding:12px 16px 16px}.section-card--json{display:flex;flex:1;min-height:calc(100vh - 180px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}.section-card--json>mat-card-content{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column}.section-card--json form-json-config-editor{display:block;flex:1;min-width:0;min-height:0}.form-row{display:block;margin-bottom:12px}.form-grid{display:grid;gap:12px}.section-help{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px}.section-help__label{font-weight:500}.grid-2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.grid-2-cols--compact{gap:12px}.w-100{width:100%}.visual-builder-content{padding:0!important;height:100%;min-width:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px}.visual-builder-content>praxis-visual-builder{flex:0 0 auto;min-width:0;min-height:clamp(360px,48vh,560px)}.visual-builder-content>praxis-rule-properties-panel{flex:0 0 auto;display:block;min-width:0;padding:0 16px 24px;box-sizing:border-box}.rules-diagnostics{flex:0 0 auto;display:grid;gap:10px;padding:12px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}.rules-diagnostics--empty{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.rules-diagnostics__summary,.rules-diagnostics__list{display:flex;flex-wrap:wrap;gap:8px}.rules-diagnostics__pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);font-size:12px;font-weight:600}.rules-diagnostics__pill--warn{background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 72%,transparent);color:var(--md-sys-color-on-tertiary-container)}.rules-diagnostics__pill--error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.rules-diagnostics__item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:min(100%,280px);padding:8px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.rules-diagnostics__item>div{display:grid;gap:2px;min-width:0}.rules-diagnostics__item strong{color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rules-diagnostics__item span{color:var(--md-sys-color-on-surface-variant);font-size:11px}.rules-diagnostics__actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}.rules-diagnostics__details{display:grid;gap:2px;margin:4px 0 0;padding-left:16px;color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35}.rules-diagnostics__details li{overflow-wrap:anywhere}.rules-diagnostics__item--warn{border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 52%,var(--md-sys-color-outline-variant))}.rules-diagnostics__item--error{border-color:var(--md-sys-color-error)}.rules-diagnostics__status{font-weight:600;margin-top:1px}.rules-diagnostics__action{min-width:0;height:28px;padding:0 10px;border-radius:999px;font-size:12px;line-height:1}.rules-diagnostics__action mat-icon{width:16px;height:16px;margin:0 4px 0 0;font-size:16px}.json-field{width:100%}.presentation-layout{display:flex;gap:20px;align-items:flex-start}.presentation-controls{flex:1 1 60%;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px}.control{display:flex;flex-direction:column}.control-span{grid-column:1/-1}.block-status{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 35%,transparent);color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.45}.block-status strong{min-width:112px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.block-status--implicit{background:color-mix(in srgb,var(--md-sys-color-surface-variant) 42%,transparent);border:1px dashed var(--md-sys-color-outline)}.block-status--readonly{margin-bottom:12px}.block-status code{font-family:var(--md-ref-typeface-mono, \"Courier New\", monospace);font-size:11px}.control__label{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-bottom:6px}.toggle-group{width:100%}.control--inline{grid-column:1/-1;display:flex;gap:16px;align-items:center}.presentation-preview{flex:0 0 360px;position:sticky;top:16px}.preview-card{border:1px solid var(--md-sys-color-outline);border-radius:12px;padding:14px;background:var(--md-sys-color-surface-container)}.preview-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.preview-row:last-child{border-bottom:none}.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}.presentation-preview .praxis-presentation__label{color:var(--md-sys-color-on-surface-variant)}.presentation-preview .praxis-presentation__value{color:var(--md-sys-color-on-surface)}.presentation-preview .presentation-mode.pres-density-cozy .preview-row{padding:6px 0}.presentation-preview .presentation-mode.pres-density-compact .preview-row,.presentation-preview .presentation-mode.pres-compact .preview-row{padding:2px 0}.presentation-preview .presentation-mode.pres-label-left .preview-row{display:grid;grid-template-columns:var(--pfx-pres-label-width, 140px) 1fr;align-items:baseline;column-gap:10px}.presentation-preview .presentation-mode.pres-label-left .praxis-presentation__label{margin:0;text-align:var(--pfx-pres-label-align, start)}.presentation-preview .presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-preview h4{margin:0 0 8px;color:var(--md-sys-color-on-surface);font-size:1rem}.section-card{border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-level1, none)}.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.tab-content--dense{padding:12px 16px 16px}.tab-content--dense .section-header,.tab-content--dense .form-row{margin-bottom:8px}.section-header h3{margin:0;font-size:1.05rem;color:var(--md-sys-color-on-surface)}.text-caption{margin:6px 0 0;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.section-header--compact{margin-bottom:8px}.section-body{display:block}.section-body--flex{flex:1;min-height:0;display:flex;flex-direction:column}.builder-header{padding:12px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.builder-header h3{margin:0;font-size:1rem;color:var(--md-sys-color-on-surface)}.hint{margin:8px 0 0;padding:10px 12px;border-radius:10px;border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}.meta-card{display:grid;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.meta-row strong{color:var(--md-sys-color-on-surface);font-weight:600}.runtime-contract-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.runtime-contract-field{display:grid;gap:6px;padding:12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.runtime-contract-label{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.runtime-contract-code{display:block;font-family:var(--md-ref-typeface-mono, \"Courier New\", monospace);font-size:12px;line-height:1.45;color:var(--md-sys-color-on-surface);word-break:break-word;white-space:normal}.command-rules-card{margin:16px;min-width:0;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container)}.command-rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;align-items:start;min-width:0}.command-rules-toolbar,.command-rules-options,.command-rules-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.command-rules-select{min-width:min(320px,100%)}.command-rules-full{grid-column:1/-1}.command-rule-condition-builder{min-height:420px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.command-rules-payload-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;min-width:0;padding:12px;border:1px dashed var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.command-rules-section-title{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase}.command-rules-surface-editor{grid-column:1/-1}.command-rule-preview{display:grid;gap:8px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface)}.command-rule-preview--invalid{border-color:var(--md-sys-color-error)}.command-rule-preview__row{display:grid;grid-template-columns:minmax(96px,.35fr) minmax(0,1fr);gap:8px;align-items:start;min-width:0}.command-rule-preview__row span{color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:600}.command-rule-preview__row strong,.command-rule-preview__row code{min-width:0;overflow-wrap:anywhere}.command-rule-preview__diagnostics{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant)}@media(max-width:768px){.mobile-tab-selector{display:block}::ng-deep .mat-mdc-tab-group.config-tabs>.mat-mdc-tab-header{display:none}.tab-content{padding:12px}.json-tab-content{padding:8px}.section-card--json{min-height:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i7$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: MatCheckboxModule }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$2.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: MatButtonToggleModule }, { kind: "directive", type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "component", type: JsonConfigEditorComponent, selector: "form-json-config-editor", inputs: ["config", "document"], outputs: ["configChange", "documentChange", "validationChange", "editorEvent"] }, { kind: "component", type: LayoutEditorComponent, selector: "praxis-layout-editor", inputs: ["config"], outputs: ["configChange", "select"] }, { kind: "component", type: BehaviorEditorComponent, selector: "praxis-behavior-editor", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: ActionsEditorComponent$1, selector: "praxis-actions-editor", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: MessagesEditorComponent, selector: "praxis-messages-editor", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HooksEditorComponent, selector: "praxis-hooks-editor", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: RulePropertiesPanelComponent, selector: "praxis-rule-properties-panel", inputs: ["rules", "visualBlockNodes"], outputs: ["rulesChange"] }, { kind: "component", type: PraxisVisualBuilder, selector: "praxis-visual-builder", inputs: ["mode", "config", "initialRules", "initialCondition"], outputs: ["rulesChanged", "conditionChanged", "exportRequested", "importRequested"] }, { kind: "component", type: CascadeManagerTabComponent, selector: "praxis-cascade-manager-tab", inputs: ["fields", "connections"], outputs: ["apply", "cancel"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDynamicFormConfigEditor, decorators: [{
             type: Component,
@@ -30294,6 +30259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSlideToggleModule,
                         MatButtonToggleModule,
                         MatTooltipModule,
+                        PraxisIconButtonComponent,
                         JsonConfigEditorComponent,
                         LayoutEditorComponent,
                         BehaviorEditorComponent,
@@ -30304,7 +30270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PraxisVisualBuilder,
                         CascadeManagerTabComponent,
                         SurfaceOpenActionEditorComponent,
-                    ], providers: [FormConfigService], template: "<div class=\"mobile-tab-selector\">\n  <mat-form-field appearance=\"outline\" class=\"mobile-tab-selector__field\">\n    <mat-label>{{ tx('config.tabs.mobileLabel', 'Se\u00E7\u00E3o do editor') }}</mat-label>\n    <mat-select [(ngModel)]=\"selectedConfigTabIndex\" data-testid=\"dynamic-form-config-editor-mobile-tabs\">\n      @for (tab of configTabOptions; track tab.key) {\n        <mat-option [value]=\"tab.index\">{{ tab.label }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-tab-group class=\"config-tabs\" data-testid=\"dynamic-form-config-editor-tabs\" [(selectedIndex)]=\"selectedConfigTabIndex\">\n  <mat-tab [label]=\"configTabLabel('general')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-geral\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.general.title', 'Dados do formul\u00E1rio') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.general.subtitle', 'Defina o modo de dados e o contexto de edi\u00E7\u00E3o.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.general.inputMode.label', 'Modo de dados') }}</mat-label>\n                <mat-select [(ngModel)]=\"inputMode\" (ngModelChange)=\"onInputModeChange()\">\n                  <mat-option value=\"create\">{{ tx('config.general.inputMode.create', 'create') }}</mat-option>\n                  <mat-option value=\"edit\">{{ tx('config.general.inputMode.edit', 'edit') }}</mat-option>\n                  <mat-option value=\"view\">{{ tx('config.general.inputMode.view', 'view') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isBindingsBlockPersisted()\">\n              <strong>{{ tx('config.general.bindings.label', 'Bindings') }}</strong>\n              @if (isBindingsBlockPersisted()) {\n                <span>{{ tx('config.general.bindings.persisted', '`bindings.mode` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.general.bindings.implicit', 'Bloco ausente no documento can\u00F4nico. O valor exibido \u00E9 fallback visual e n\u00E3o ser\u00E1 salvo at\u00E9 voc\u00EA editar este campo.') }}\n              }\n            </div>\n            <div class=\"section-help\">\n              <span class=\"section-help__label\">{{ tx('config.common.understand', 'Entenda:') }}</span>\n              <button\n                mat-icon-button\n                class=\"help-icon-button\"\n                type=\"button\"\n                [matTooltip]=\"tx('config.general.inputMode.tooltip', 'O mode controla o fluxo (create/edit/view). enableCustomization s\u00F3 libera edi\u00E7\u00E3o do layout e n\u00E3o altera o mode.')\"\n                matTooltipPosition=\"above\"\n                >\n                <mat-icon>help_outline</mat-icon>\n              </button>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n\n      @if (hasResolvedRuntimeContract()) {\n        <mat-card\n          class=\"section-card\"\n          data-testid=\"config-tab-runtime-contract\"\n          >\n          <mat-card-content>\n            <div class=\"section-header\">\n              <div>\n                <h3>{{ tx('config.general.runtimeContract.title', 'Contrato Runtime Resolvido') }}</h3>\n                <p class=\"text-caption\">\n                  {{ tx('config.general.runtimeContract.subtitle', 'Visualiza\u00E7\u00E3o somente leitura do contrato backend resolvido pelo host atual.') }}\n                </p>\n              </div>\n            </div>\n            <div class=\"block-status block-status--readonly\">\n              <strong>{{ tx('config.general.runtimeContract.runtimeLabel', 'Runtime') }}</strong>\n              <span>\n                {{ tx('config.general.runtimeContract.readonly', 'Esses valores v\u00EAm do host/runtime atual e n\u00E3o s\u00E3o persistidos em `bindings` nem em `contextSnapshot`.') }}\n              </span>\n            </div>\n            <div class=\"runtime-contract-grid\">\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.schemaUrl', 'Schema URL') }}</span>\n                <code class=\"runtime-contract-code\">{{ runtimeContract?.schemaUrl || '\u2014' }}</code>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.schemaSource', 'Origem do schema') }}</span>\n                <strong>{{ describeRuntimeSource(runtimeContract?.schemaSource) }}</strong>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitMethod', 'Submit method') }}</span>\n                <strong>{{ runtimeContract?.submitMethod || '\u2014' }}</strong>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitUrl', 'Submit URL') }}</span>\n                <code class=\"runtime-contract-code\">{{ runtimeContract?.submitUrl || '\u2014' }}</code>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitSource', 'Origem do submit') }}</span>\n                <strong>{{ describeRuntimeSource(runtimeContract?.submitSource) }}</strong>\n              </div>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      }\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('schema')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-schema\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.schema.title', 'Valida\u00E7\u00E3o de schema') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.schema.subtitle', 'Controle avisos quando o schema do servidor mudar.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.schema.notify.label', 'Notificar quando desatualizado') }}</mat-label>\n                <mat-select [(ngModel)]=\"schemaPrefs.notifyIfOutdated\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-notify')\">\n                  <mat-option value=\"both\">{{ tx('config.schema.notify.both', 'Banner + Snackbar') }}</mat-option>\n                  <mat-option value=\"inline\">{{ tx('config.schema.notify.inline', 'Somente Banner') }}</mat-option>\n                  <mat-option value=\"snackbar\">{{ tx('config.schema.notify.snackbar', 'Somente Snackbar') }}</mat-option>\n                  <mat-option value=\"none\">{{ tx('config.schema.notify.none', 'Nenhum') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.schema.snooze.label', 'Intervalo de sil\u00EAncio (ms)') }}</mat-label>\n                <input matInput type=\"number\" [(ngModel)]=\"schemaPrefs.snoozeMs\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-snooze')\" />\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-slide-toggle [(ngModel)]=\"schemaPrefs.autoOpenSettingsOnOutdated\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-auto-open')\">\n                {{ tx('config.schema.autoOpenSettings', 'Abrir configura\u00E7\u00F5es automaticamente') }}\n              </mat-slide-toggle>\n            </div>\n            @if (serverMeta) {\n              <div class=\"form-row\">\n                <div class=\"meta-card\">\n                  <div class=\"meta-row\">\n                    <span>{{ tx('config.schema.meta.serverHash', 'Server hash') }}</span>\n                    <strong>{{ serverMeta.serverHash || '\u2014' }}</strong>\n                  </div>\n                  <div class=\"meta-row\">\n                    <span>{{ tx('config.schema.meta.lastVerifiedAt', '\u00DAltima verifica\u00E7\u00E3o') }}</span>\n                    <strong>{{ serverMeta.lastVerifiedAt || '\u2014' }}</strong>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isSchemaPrefsBlockPersisted()\">\n              <strong>{{ tx('config.schema.prefs.label', 'Schema Prefs') }}</strong>\n              @if (isSchemaPrefsBlockPersisted()) {\n                <span>{{ tx('config.schema.prefs.persisted', '`contextSnapshot.schemaPrefs` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.schema.prefs.implicit', 'Bloco ausente no documento can\u00F4nico. Os controles exibem fallback visual e n\u00E3o ser\u00E3o salvos at\u00E9 voc\u00EA editar.') }}\n              }\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('layout')\">\n    <div class=\"tab-content tab-content--full\" data-testid=\"config-tab-panel-layout\">\n      <div class=\"section-header section-header--compact\">\n        <div>\n          <h3>{{ tx('config.layout.title', 'Layout do formul\u00E1rio') }}</h3>\n          <p class=\"text-caption\">{{ tx('config.layout.subtitle', 'Organize se\u00E7\u00F5es, linhas e campos com drag & drop.') }}</p>\n        </div>\n      </div>\n      <div class=\"section-body section-body--flex\">\n        <praxis-layout-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"\n        (select)=\"onLayoutSelect($event)\"></praxis-layout-editor>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('hooks')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-hooks\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.hooks.title', 'Hooks de ciclo de vida') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.hooks.subtitle', 'Automatize a\u00E7\u00F5es nos eventos do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <praxis-hooks-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-hooks-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  @if (isPresentationMode) {\n    <mat-tab [label]=\"configTabLabel('presentation')\">\n      <div class=\"tab-content\" data-testid=\"config-tab-panel-presentation\">\n        <mat-card class=\"section-card\">\n          <mat-card-content>\n            <div class=\"section-header\">\n              <div>\n                <h3>{{ tx('config.presentation.title', 'Modo Apresenta\u00E7\u00E3o') }}</h3>\n                <p class=\"text-caption\">{{ tx('config.presentation.subtitle', 'Configura\u00E7\u00F5es de exibi\u00E7\u00E3o aplicadas somente ao modo apresenta\u00E7\u00E3o.') }}</p>\n              </div>\n            </div>\n            <div class=\"presentation-layout\">\n              <div class=\"presentation-controls\">\n                <div class=\"block-status control-span\" [class.block-status--implicit]=\"!isPresentationBlockPersisted()\">\n                  <strong>{{ tx('config.presentation.block.label', 'Presentation') }}</strong>\n                  @if (isPresentationBlockPersisted()) {\n                    <span>{{ tx('config.presentation.block.persisted', '`contextSnapshot.presentation` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n                  } @else {\n                    {{ tx('config.presentation.block.implicit', 'Bloco ausente no documento can\u00F4nico. A pr\u00E9-visualiza\u00E7\u00E3o usa fallback local e n\u00E3o ser\u00E1 salva at\u00E9 voc\u00EA editar.') }}\n                  }\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.labelPosition.label', 'Posi\u00E7\u00E3o do r\u00F3tulo') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.labelPosition\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-position')\" [attr.aria-label]=\"tx('config.presentation.labelPosition.ariaLabel', 'Posi\u00E7\u00E3o do r\u00F3tulo')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"above\">\n                      <mat-icon>view_stream</mat-icon>\n                      <span class=\"sr-only\">{{ tx('config.presentation.labelPosition.above', 'Acima') }}</span>\n                    </mat-button-toggle>\n                    <mat-button-toggle value=\"left\">\n                      <mat-icon>view_column</mat-icon>\n                      <span class=\"sr-only\">{{ tx('config.presentation.labelPosition.left', '\u00C0 esquerda') }}</span>\n                    </mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.density.label', 'Densidade') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.density\" (ngModelChange)=\"onPresentationPrefsChange('presentation-density')\" [attr.aria-label]=\"tx('config.presentation.density.ariaLabel', 'Densidade')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"comfortable\">{{ tx('config.presentation.density.comfortable', 'Confort\u00E1vel') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"cozy\">{{ tx('config.presentation.density.cozy', 'Intermedi\u00E1ria') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"compact\">{{ tx('config.presentation.density.compact', 'Compacta') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.labelAlign.label', 'Alinhamento do r\u00F3tulo') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.labelAlign\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-align')\" [attr.aria-label]=\"tx('config.presentation.labelAlign.ariaLabel', 'Alinhamento do r\u00F3tulo')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"start\"><mat-icon>format_align_left</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"center\"><mat-icon>format_align_center</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"end\"><mat-icon>format_align_right</mat-icon></mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.valueAlign.label', 'Alinhamento do valor') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.valueAlign\" (ngModelChange)=\"onPresentationPrefsChange('presentation-value-align')\" [attr.aria-label]=\"tx('config.presentation.valueAlign.ariaLabel', 'Alinhamento do valor')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"start\"><mat-icon>format_align_left</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"center\"><mat-icon>format_align_center</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"end\"><mat-icon>format_align_right</mat-icon></mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.labelFontSize.label', 'Tamanho do r\u00F3tulo') }}</mat-label>\n                    <input matInput type=\"number\" min=\"10\" [(ngModel)]=\"presentationPrefs.labelFontSize\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-font-size')\"\n                      [placeholder]=\"tx('config.presentation.labelFontSize.placeholder', 'ex.: 12')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.valueFontSize.label', 'Tamanho do valor') }}</mat-label>\n                    <input matInput type=\"number\" min=\"10\" [(ngModel)]=\"presentationPrefs.valueFontSize\" (ngModelChange)=\"onPresentationPrefsChange('presentation-value-font-size')\"\n                      [placeholder]=\"tx('config.presentation.valueFontSize.placeholder', 'ex.: 16')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.labelWidth.label', 'Largura do r\u00F3tulo (label \u00E0 esquerda)') }}</mat-label>\n                    <input matInput type=\"number\" min=\"60\" [(ngModel)]=\"presentationPrefs.labelWidth\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-width')\"\n                      [placeholder]=\"tx('config.presentation.labelWidth.placeholder', 'ex.: 140')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control control--inline\">\n                  <mat-slide-toggle [(ngModel)]=\"presentationPrefs.compact\" (ngModelChange)=\"onPresentationPrefsChange('presentation-compact')\">\n                    {{ tx('config.presentation.options.compactMode', 'Modo compacto') }}\n                  </mat-slide-toggle>\n                  <mat-checkbox [(ngModel)]=\"truncatePreview\">\n                    {{ tx('config.presentation.options.truncateValues', 'Truncar valores') }}\n                  </mat-checkbox>\n                </div>\n              </div>\n              <div class=\"presentation-preview\">\n                <h4>{{ tx('config.presentation.preview.title', 'Pr\u00E9-visualiza\u00E7\u00E3o') }}</h4>\n                <div class=\"preview-card\">\n                <div class=\"praxis-dynamic-form presentation-mode\" [ngClass]=\"{\n                           'pres-compact': !!presentationPrefs.compact,\n                           'pres-label-left': presentationPrefs.labelPosition === 'left',\n                           'pres-label-above': presentationPrefs.labelPosition === 'above',\n                           'pres-density-compact': presentationPrefs.density === 'compact',\n                           'pres-density-cozy': presentationPrefs.density === 'cozy'\n                         }\" [style.--pfx-pres-label-size]=\"(presentationPrefs.labelFontSize || 12) + 'px'\"\n                    [style.--pfx-pres-value-size]=\"(presentationPrefs.valueFontSize || 16) + 'px'\"\n                    [style.--pfx-pres-label-width]=\"(presentationPrefs.labelWidth || 140) + 'px'\"\n                    [style.--pfx-pres-label-align]=\"presentationPrefs.labelAlign || 'start'\"\n                    [style.--pfx-pres-value-align]=\"presentationPrefs.valueAlign || 'start'\">\n                    @for (item of previewItems; track item) {\n                      <div class=\"preview-row\">\n                        <span class=\"praxis-presentation__label\">{{ item.label }}</span>\n                        <span class=\"praxis-presentation__value\" [title]=\"truncatePreview ? item.value : null\"\n                          [style.maxWidth]=\"truncatePreview ? '280px' : null\"\n                          [style.overflow]=\"truncatePreview ? 'hidden' : null\"\n                          [style.textOverflow]=\"truncatePreview ? 'ellipsis' : null\"\n                          [style.whiteSpace]=\"truncatePreview ? 'nowrap' : 'normal'\">\n                          {{ item.value }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"section-help\">\n              <span class=\"section-help__label\">{{ tx('config.common.understand', 'Entenda:') }}</span>\n              <button\n                mat-icon-button\n                class=\"help-icon-button\"\n                type=\"button\"\n                [matTooltip]=\"tx('config.presentation.help.tooltip', 'Ajustes aplicam somente ao Modo Apresenta\u00E7\u00E3o e s\u00E3o salvos por formul\u00E1rio (via CSS/Classes).')\"\n                matTooltipPosition=\"above\"\n                >\n                <mat-icon>help_outline</mat-icon>\n              </button>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </mat-tab>\n  }\n  <mat-tab [label]=\"configTabLabel('behavior')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-comportamento\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.behavior.title', 'Comportamento') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.behavior.subtitle', 'Ajuste valida\u00E7\u00F5es e respostas do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <praxis-behavior-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-behavior-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('hints')\">\n    <div class=\"tab-content tab-content--dense\" data-testid=\"config-tab-panel-hints\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.hints.title', 'Dicas dos modos') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.hints.subtitle', 'Personalize textos de apoio para modos de dados e estados de UI.') }}</p>\n            </div>\n          </div>\n          <p class=\"text-caption\">{{ tx('config.hints.description', 'Personalize os textos usados como tooltip/hint para modos de dados e modos globais de UI.') }}</p>\n\n          <div class=\"grid-2-cols grid-2-cols--compact\">\n            <section>\n              <h4>{{ tx('config.hints.dataModes.title', 'Modos de dados') }}</h4>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.create.label', 'Criar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.create\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-create')\" [placeholder]=\"tx('config.hints.dataModes.create.placeholder', 'Ex.: Preencha os campos obrigat\u00F3rios.')\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.edit.label', 'Editar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.edit\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-edit')\" [placeholder]=\"tx('config.hints.dataModes.edit.placeholder', 'Ex.: Revise os dados antes de salvar.')\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.view.label', 'Visualizar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.view\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-view')\" [placeholder]=\"tx('config.hints.dataModes.view.placeholder', 'Ex.: Visualiza\u00E7\u00E3o somente leitura.')\" />\n              </mat-form-field>\n            </section>\n\n            <section>\n              <h4>{{ tx('config.hints.uiModes.title', 'Modos de UI') }}</h4>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.presentation.label', 'Apresenta\u00E7\u00E3o') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.presentation\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-presentation')\" [placeholder]=\"tx('config.hints.uiModes.presentation.placeholder', 'Ex.: Modo compacto para leitura r\u00E1pida.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.readonly.label', 'Leitura (readonly)') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.readonly\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-readonly')\" [placeholder]=\"tx('config.hints.uiModes.readonly.placeholder', 'Ex.: Campos bloqueados para edi\u00E7\u00E3o.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.disabled.label', 'Desabilitado') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.disabled\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-disabled')\" [placeholder]=\"tx('config.hints.uiModes.disabled.placeholder', 'Ex.: Fun\u00E7\u00E3o indispon\u00EDvel no momento.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.visible.label', 'Vis\u00EDvel') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.visible\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-visible')\" [placeholder]=\"tx('config.hints.uiModes.visible.placeholder', 'Ex.: Campo exibido conforme permiss\u00F5es.')\"></textarea>\n              </mat-form-field>\n            </section>\n          </div>\n\n          <section>\n            <h4>{{ tx('config.helpPresentation.title', 'Apresenta\u00E7\u00E3o das ajudas dos campos') }}</h4>\n            <p class=\"text-caption\">{{ tx('config.helpPresentation.description', 'Controle como hint/helpText dos campos aparece em formul\u00E1rios densos. Erros de valida\u00E7\u00E3o continuam inline.') }}</p>\n            <div class=\"grid-3-cols\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.display.label', 'Exibi\u00E7\u00E3o') }}</mat-label>\n                <mat-select [ngModel]=\"helpPresentationDraft.display\" (ngModelChange)=\"onHelpPresentationDisplayChange($event)\">\n                  <mat-option value=\"inline\">{{ tx('config.helpPresentation.display.inline', 'Inline') }}</mat-option>\n                  <mat-option value=\"popover\">{{ tx('config.helpPresentation.display.popover', '\u00CDcone de ajuda') }}</mat-option>\n                  <mat-option value=\"auto\">{{ tx('config.helpPresentation.display.auto', 'Autom\u00E1tica') }}</mat-option>\n                  <mat-option value=\"hidden\">{{ tx('config.helpPresentation.display.hidden', 'Oculta') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.inlineMaxLength.label', 'Limite inline') }}</mat-label>\n                <input matInput type=\"number\" min=\"0\" [ngModel]=\"helpPresentationDraft.inlineMaxLength\"\n                  (ngModelChange)=\"onHelpPresentationInlineMaxLengthChange($event)\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.preferPopoverForControls.label', 'Preferir \u00EDcone em') }}</mat-label>\n                <input matInput [ngModel]=\"getHelpPreferPopoverControlsText()\"\n                  (ngModelChange)=\"onHelpPreferPopoverControlsChange($event)\"\n                  [placeholder]=\"tx('config.helpPresentation.preferPopoverForControls.placeholder', 'toggle, checkbox, select')\" />\n              </mat-form-field>\n            </div>\n          </section>\n\n          <div class=\"actions-row\">\n            <button mat-stroked-button color=\"primary\" type=\"button\" (click)=\"restoreHintsDefaults()\">\n              <mat-icon>restore</mat-icon>\n              {{ tx('config.hints.actions.restoreDefaults', 'Restaurar padr\u00F5es') }}\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('actions')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-acoes\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.actions.title', 'A\u00E7\u00F5es do formul\u00E1rio') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.actions.subtitle', 'Configure bot\u00F5es padr\u00E3o e a\u00E7\u00F5es customizadas.') }}</p>\n            </div>\n          </div>\n          <praxis-actions-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-actions-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('rules')\">\n    <div class=\"tab-content visual-builder-content\" data-testid=\"config-tab-panel-regras\">\n      <div class=\"builder-header\">\n        <div>\n          <h3>{{ tx('config.rules.title', 'Regras visuais') }}</h3>\n          <p class=\"text-caption\">{{ tx('config.rules.subtitle', 'Defina visibilidade, estilos e rea\u00E7\u00F5es baseadas em condi\u00E7\u00F5es.') }}</p>\n        </div>\n      </div>\n      @if (ruleDiagnostics.length) {\n        <div class=\"rules-diagnostics\" data-testid=\"rules-diagnostics-panel\">\n          <div class=\"rules-diagnostics__summary\">\n            <span class=\"rules-diagnostics__pill rules-diagnostics__pill--total\">\n              {{ tx('config.rules.summary.total', '{{count}} regras', { count: ruleDiagnosticsSummary.total }) }}\n            </span>\n            @if (ruleDiagnosticsSummary.invalid) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--error\">\n                {{ tx('config.rules.summary.invalid', '{{count}} inv\u00E1lidas', { count: ruleDiagnosticsSummary.invalid }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.unsupported) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.unsupported', '{{count}} com propriedades rejeitadas', { count: ruleDiagnosticsSummary.unsupported }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.runtimeOnly) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.runtimeOnly', '{{count}} runtime only', { count: ruleDiagnosticsSummary.runtimeOnly }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.pendingReview) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.pendingReview', '{{count}} pendentes de revis\u00E3o', { count: ruleDiagnosticsSummary.pendingReview }) }}\n              </span>\n            }\n          </div>\n          <div class=\"rules-diagnostics__list\" [attr.aria-label]=\"tx('config.rules.diagnostics.ariaLabel', 'Diagn\u00F3stico das regras')\">\n            @for (diagnostic of ruleDiagnostics; track diagnostic) {\n              <article class=\"rules-diagnostics__item\"\n                [class.rules-diagnostics__item--error]=\"getRuleStatusTone(diagnostic) === 'error'\"\n                [class.rules-diagnostics__item--warn]=\"getRuleStatusTone(diagnostic) === 'warn'\">\n                <div>\n                  <strong>{{ diagnostic.ruleName || diagnostic.ruleId }}</strong>\n                  <span>\n                    {{ tx('config.rules.diagnostics.targetConditionSummary', '{{targets}} alvo(s) \u00B7 {{conditions}} campo(s) na condi\u00E7\u00E3o', { targets: diagnostic.targetRefs.length, conditions: diagnostic.conditionRefs.length }) }}\n                  </span>\n                  @if (getRuleDiagnosticDetails(diagnostic).length) {\n                    <ul class=\"rules-diagnostics__details\">\n                      @for (detail of getRuleDiagnosticDetails(diagnostic); track detail) {\n                        <li>{{ detail }}</li>\n                      }\n                    </ul>\n                  }\n                </div>\n                <div class=\"rules-diagnostics__actions\">\n                  <span class=\"rules-diagnostics__status\">{{ getRuleStatusLabel(diagnostic) }}</span>\n                  @if (canApplyRulePropertyFix(diagnostic)) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [matTooltip]=\"tx('config.rules.actions.fix.tooltip', 'Aplicar whitelist e saneamento de propriedades nesta regra')\"\n                      (click)=\"applyRulePropertyFix(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                      {{ tx('config.rules.actions.fix', 'Corrigir') }}\n                    </button>\n                  }\n                  @if (diagnostic.status.includes('llm-generated-pending-review')) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [disabled]=\"!canAcceptPendingLlmRule(diagnostic)\"\n                      [matTooltip]=\"canAcceptPendingLlmRule(diagnostic) ? tx('config.rules.actions.accept.tooltip.ready', 'Aceitar sugest\u00E3o e atualizar estado visual') : tx('config.rules.actions.accept.tooltip.blocked', 'Corrija alvo, condi\u00E7\u00E3o e propriedades antes de aceitar')\"\n                      (click)=\"acceptPendingLlmRule(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">check</mat-icon>\n                      {{ tx('config.rules.actions.accept', 'Aceitar') }}\n                    </button>\n                  }\n                  @if (canOpenRuleJsonReview(diagnostic)) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [matTooltip]=\"tx('config.rules.actions.reviewJson.tooltip', 'Abrir a aba JSON para revisar esta regra sem convers\u00E3o visual')\"\n                      (click)=\"openRuleJsonReview(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">data_object</mat-icon>\n                      {{ tx('config.rules.actions.reviewJson', 'Ver JSON') }}\n                    </button>\n                  }\n                </div>\n              </article>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"rules-diagnostics rules-diagnostics--empty\" data-testid=\"rules-diagnostics-empty\">\n          {{ tx('config.rules.empty', 'Nenhuma regra definida ainda. Crie uma regra para ver alvos, condi\u00E7\u00E3o, propriedades e compatibilidade do builder.') }}\n        </div>\n      }\n      <praxis-visual-builder [config]=\"ruleBuilderConfig\" [initialRules]=\"ruleBuilderState\"\n      (rulesChanged)=\"onRulesChanged($event)\"></praxis-visual-builder>\n      <praxis-rule-properties-panel\n        [rules]=\"currentRules\"\n        [visualBlockNodes]=\"visualBlockNodeOptions\"\n        (rulesChange)=\"onRulePropertiesChanged($event)\"\n      ></praxis-rule-properties-panel>\n      <mat-card class=\"command-rules-card\" data-testid=\"form-command-rules-editor\">\n        <mat-card-title>{{ tx('config.commandRules.title', 'Comandos condicionais') }}</mat-card-title>\n        <mat-card-subtitle>{{ tx('config.commandRules.subtitle', 'Execute a\u00E7\u00F5es globais quando uma condi\u00E7\u00E3o do formul\u00E1rio for satisfeita.') }}</mat-card-subtitle>\n        <mat-card-content>\n          <div class=\"command-rules-grid\">\n            <div class=\"command-rules-toolbar\">\n              <mat-form-field appearance=\"fill\" class=\"command-rules-select\">\n                <mat-label>{{ tx('config.commandRules.command.label', 'Comando') }}</mat-label>\n                <mat-select [(ngModel)]=\"selectedCommandRuleId\" (selectionChange)=\"onCommandRuleSelectionChange()\">\n                  @for (rule of commandRules; track rule) {\n                    <mat-option [value]=\"rule.id\">\n                      {{ rule.id }}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <button mat-stroked-button type=\"button\" (click)=\"addCommandRule()\">\n                <mat-icon aria-hidden=\"true\">add</mat-icon>\n                {{ tx('config.commandRules.actions.add', 'Adicionar') }}\n              </button>\n              <button mat-stroked-button color=\"warn\" type=\"button\" (click)=\"deleteCommandRule()\" [disabled]=\"!selectedCommandRuleId\">\n                <mat-icon aria-hidden=\"true\">delete</mat-icon>\n                {{ tx('config.commandRules.actions.remove', 'Remover') }}\n              </button>\n            </div>\n\n            @if (selectedCommandRuleId) {\n              <div class=\"command-rule-condition-builder command-rules-full\">\n                <praxis-visual-builder\n                  mode=\"condition\"\n                  [config]=\"ruleBuilderConfig\"\n                  [initialCondition]=\"commandRuleCondition\"\n                  (conditionChanged)=\"onCommandConditionChanged($event)\"\n                ></praxis-visual-builder>\n              </div>\n            }\n\n            <mat-form-field appearance=\"fill\" class=\"command-rules-full\">\n              <mat-label>{{ tx('config.commandRules.conditionJson.label', 'Condi\u00E7\u00E3o JSON Logic') }}</mat-label>\n              <textarea\n                matInput\n                rows=\"5\"\n                [(ngModel)]=\"commandRuleConditionJson\"\n                [attr.aria-label]=\"tx('config.commandRules.conditionJson.ariaLabel', 'Condi\u00E7\u00E3o JSON Logic do comando condicional')\"\n              ></textarea>\n            </mat-form-field>\n\n            <mat-form-field appearance=\"fill\">\n              <mat-label>{{ tx('config.commandRules.globalAction.label', 'A\u00E7\u00E3o global') }}</mat-label>\n              <mat-select [(ngModel)]=\"commandRuleActionId\" (selectionChange)=\"onCommandActionChange()\">\n                @for (action of globalActionCatalog; track action) {\n                  <mat-option [value]=\"action.id\">\n                    {{ action.label || action.id }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n\n            <mat-form-field appearance=\"fill\">\n              <mat-label>{{ tx('config.commandRules.distinctBy.label', 'distinctBy') }}</mat-label>\n              <input matInput [(ngModel)]=\"commandRuleDistinctBy\" [placeholder]=\"tx('config.commandRules.distinctBy.placeholder', 'ex.: idade')\" />\n            </mat-form-field>\n\n            @if (commandRuleActionSchema; as actionSchema) {\n              <div\n                class=\"command-rules-payload-fields command-rules-full\"\n                >\n                <div class=\"command-rules-section-title\">{{ tx('config.commandRules.structuredPayload.title', 'Payload estruturado') }}</div>\n                @if (actionSchema.editorMode !== 'surface-open') {\n                  @for (field of actionSchema.fields; track field) {\n                    @if (shouldShowCommandActionField(field)) {\n                      @if (field.type === 'toggle') {\n                        <mat-slide-toggle\n                          [ngModel]=\"getCommandActionFieldValue(field)\"\n                          (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          >\n                          {{ field.label }}\n                        </mat-slide-toggle>\n                      } @else {\n                        <mat-form-field appearance=\"fill\">\n                          <mat-label>{{ field.label }}</mat-label>\n                          @if (field.type === 'textarea' || field.type === 'json') {\n                            <textarea\n                              matInput\n                              [rows]=\"field.rows || (field.type === 'json' ? 3 : 2)\"\n                              [ngModel]=\"getCommandActionFieldValue(field)\"\n                              (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                              [ngModelOptions]=\"{ standalone: true }\"\n                              [placeholder]=\"field.placeholder || (field.type === 'json' ? '{ }' : '')\"\n                              [required]=\"isCommandActionFieldRequired(field)\"\n                            ></textarea>\n                          } @else {\n                            @if (field.type === 'select') {\n                              <mat-select\n                                [ngModel]=\"getCommandActionFieldValue(field)\"\n                                (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                [required]=\"isCommandActionFieldRequired(field)\"\n                                >\n                                @for (option of field.options || []; track option) {\n                                  <mat-option [value]=\"option.value\">\n                                    {{ option.label }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input\n                                matInput\n                                [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                                [ngModel]=\"getCommandActionFieldValue(field)\"\n                                (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                [placeholder]=\"field.placeholder || ''\"\n                                [required]=\"isCommandActionFieldRequired(field)\"\n                                />\n                            }\n                          }\n                          @if (field.hint) {\n                            <mat-hint>{{ field.hint }}</mat-hint>\n                          }\n                          @if (hasCommandActionFieldError(field.key)) {\n                            <mat-error>\n                              {{ getCommandActionFieldError(field.key) }}\n                            </mat-error>\n                          }\n                          @if (!hasCommandActionFieldError(field.key) && isCommandActionFieldMissing(field)) {\n                            <mat-error>\n                              {{ tx('config.commandRules.validation.requiredField', 'Campo obrigat\u00F3rio.') }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      }\n                    }\n                  }\n                } @else {\n                  <praxis-surface-open-action-editor\n                    class=\"command-rules-surface-editor\"\n                    data-testid=\"form-command-rule-surface-open-editor\"\n                    [value]=\"commandRuleSurfaceOpenPayload\"\n                    hostKind=\"dynamic-form\"\n                    (valueChange)=\"onCommandSurfaceOpenPayloadChange($event)\"\n                  ></praxis-surface-open-action-editor>\n                }\n              </div>\n            }\n\n            <mat-form-field appearance=\"fill\" class=\"command-rules-full\">\n              <mat-label>{{ tx('config.commandRules.advancedPayload.label', 'Payload JSON avan\u00E7ado') }}</mat-label>\n              <textarea\n                matInput\n                rows=\"4\"\n                [(ngModel)]=\"commandRulePayloadJson\"\n                [attr.aria-label]=\"tx('config.commandRules.advancedPayload.ariaLabel', 'Payload JSON da a\u00E7\u00E3o global')\"\n              ></textarea>\n            </mat-form-field>\n\n            <div class=\"command-rules-options\">\n              <mat-slide-toggle [(ngModel)]=\"commandRuleDistinct\">{{ tx('config.commandRules.options.distinct', 'Evitar repeti\u00E7\u00E3o enquanto a condi\u00E7\u00E3o permanecer verdadeira') }}</mat-slide-toggle>\n              <mat-slide-toggle [(ngModel)]=\"commandRuleRunOnInitialEvaluation\">{{ tx('config.commandRules.options.runOnInitialEvaluation', 'Executar tamb\u00E9m na avalia\u00E7\u00E3o inicial') }}</mat-slide-toggle>\n            </div>\n\n            @if (commandRuleAuthoringError) {\n              <div class=\"preview-error command-rules-full\">\n                <mat-icon aria-hidden=\"true\">warning</mat-icon>\n                <span>{{ commandRuleAuthoringError }}</span>\n              </div>\n            }\n\n            <div\n              class=\"command-rule-preview command-rules-full\"\n              [class.command-rule-preview--invalid]=\"commandRulePreview.state === 'invalid'\"\n              data-testid=\"command-rule-preview\"\n              >\n              <div class=\"command-rules-section-title\">{{ tx('config.commandRules.preview.title', 'Preview do comando') }}</div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.mode', 'Modo') }}</span>\n                <strong>{{ commandRulePreview.executionMode }}</strong>\n              </div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.action', 'A\u00E7\u00E3o') }}</span>\n                <strong>{{ commandRulePreview.actionId || '\u2014' }}</strong>\n              </div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.policy', 'Policy') }}</span>\n                <code>{{ commandRulePreview.policy | json }}</code>\n              </div>\n              @if (commandRulePreview.diagnostics.length) {\n                <div class=\"command-rule-preview__diagnostics\">\n                  <mat-icon aria-hidden=\"true\">{{ commandRulePreview.state === 'invalid' ? 'warning' : 'visibility' }}</mat-icon>\n                  <span>{{ commandRulePreview.diagnostics[0] }}</span>\n                </div>\n              }\n            </div>\n\n            <div class=\"command-rules-actions\">\n              <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"applyCommandRule()\">\n                <mat-icon aria-hidden=\"true\">check</mat-icon>\n                {{ tx('config.commandRules.actions.apply', 'Aplicar comando') }}\n              </button>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('cascades')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-cascatas\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.cascades.title', 'Depend\u00EAncias entre campos') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.cascades.subtitle', 'Configure cascatas e carregamento entre campos.') }}</p>\n            </div>\n          </div>\n          <praxis-cascade-manager-tab [fields]=\"editedConfig.fieldMetadata || []\"\n          (apply)=\"onCascadeApply($event)\"></praxis-cascade-manager-tab>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('messages')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-mensagens\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.messages.title', 'Mensagens e feedback') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.messages.subtitle', 'Padronize textos de sucesso, erro e confirma\u00E7\u00F5es.') }}</p>\n            </div>\n          </div>\n          <praxis-messages-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-messages-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('navigation')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-navegacao\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.navigation.title', 'Navega\u00E7\u00E3o de retorno') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.navigation.subtitle', 'Defina o comportamento do bot\u00E3o Voltar em fluxos CRUD.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.navigation.returnTo.label', 'Rota de retorno') }}</mat-label>\n                <input matInput id=\"returnTo\" [(ngModel)]=\"backConfig!.returnTo\" (ngModelChange)=\"onBackConfigChange()\" [placeholder]=\"tx('config.navigation.returnTo.placeholder', '/funcionarios')\" />\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-slide-toggle [(ngModel)]=\"backConfig!.confirmOnDirty\" (ngModelChange)=\"onBackConfigChange()\">\n                {{ tx('config.navigation.confirmOnDirty.label', 'Confirmar ao sair com altera\u00E7\u00F5es') }}\n              </mat-slide-toggle>\n            </div>\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isBackConfigBlockPersisted()\">\n              <strong>{{ tx('config.navigation.backConfig.label', 'Back Config') }}</strong>\n              @if (isBackConfigBlockPersisted()) {\n                <span>{{ tx('config.navigation.backConfig.persisted', '`contextSnapshot.backConfig` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.navigation.backConfig.implicit', 'Bloco ausente no documento can\u00F4nico. Os valores exibidos s\u00E3o fallback visual e n\u00E3o ser\u00E3o salvos at\u00E9 voc\u00EA editar.') }}\n              }\n            </div>\n          </div>\n          <div class=\"section-help\">\n            <span class=\"section-help__label\">{{ tx('config.navigation.note.label', 'Observa\u00E7\u00E3o:') }}</span>\n            <button\n              mat-icon-button\n              class=\"help-icon-button\"\n              type=\"button\"\n              [matTooltip]=\"tx('config.navigation.note.tooltip', 'Afeta o fluxo de navega\u00E7\u00E3o do CRUD e pode ser sobreposto por metadados do recurso.')\"\n              matTooltipPosition=\"above\"\n              >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('json')\">\n    <div class=\"tab-content json-tab-content\" data-testid=\"config-tab-panel-json\">\n      <mat-card class=\"section-card section-card--json\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.json.title', 'Configura\u00E7\u00E3o JSON') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.json.subtitle', 'Edi\u00E7\u00E3o avan\u00E7ada do documento can\u00F4nico de autoria do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <form-json-config-editor [document]=\"jsonDocument\" (documentChange)=\"onJsonConfigChange($event)\"\n            (validationChange)=\"onJsonValidationChange($event)\" (editorEvent)=\"onJsonEditorEvent($event)\">\n          </form-json-config-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0}.mobile-tab-selector{display:none;flex:0 0 auto;padding:8px 16px 0;background:var(--md-sys-color-surface)}.mobile-tab-selector__field{width:100%}.config-tabs{flex:1 1 auto;min-height:0;min-width:0}::ng-deep .mat-mdc-tab-group.config-tabs{display:flex;flex-direction:column}::ng-deep .mat-mdc-tab-group.config-tabs .mat-mdc-tab-body-wrapper{flex:1;min-height:0;min-width:0}::ng-deep .mat-mdc-tab-group.config-tabs .mat-mdc-tab-body-content{height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:0!important}.tab-content{padding:16px 20px 20px;flex:1;min-width:0;box-sizing:border-box}.json-tab-content{min-width:0;padding:12px 16px 16px}.section-card--json{display:flex;flex:1;min-height:calc(100vh - 180px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}.section-card--json>mat-card-content{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column}.section-card--json form-json-config-editor{display:block;flex:1;min-width:0;min-height:0}.form-row{display:block;margin-bottom:12px}.form-grid{display:grid;gap:12px}.section-help{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px}.section-help__label{font-weight:500}.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}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.grid-2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.grid-2-cols--compact{gap:12px}.w-100{width:100%}.visual-builder-content{padding:0!important;height:100%;min-width:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px}.visual-builder-content>praxis-visual-builder{flex:0 0 auto;min-width:0;min-height:clamp(360px,48vh,560px)}.visual-builder-content>praxis-rule-properties-panel{flex:0 0 auto;display:block;min-width:0;padding:0 16px 24px;box-sizing:border-box}.rules-diagnostics{flex:0 0 auto;display:grid;gap:10px;padding:12px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}.rules-diagnostics--empty{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.rules-diagnostics__summary,.rules-diagnostics__list{display:flex;flex-wrap:wrap;gap:8px}.rules-diagnostics__pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);font-size:12px;font-weight:600}.rules-diagnostics__pill--warn{background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 72%,transparent);color:var(--md-sys-color-on-tertiary-container)}.rules-diagnostics__pill--error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.rules-diagnostics__item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:min(100%,280px);padding:8px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.rules-diagnostics__item>div{display:grid;gap:2px;min-width:0}.rules-diagnostics__item strong{color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rules-diagnostics__item span{color:var(--md-sys-color-on-surface-variant);font-size:11px}.rules-diagnostics__actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}.rules-diagnostics__details{display:grid;gap:2px;margin:4px 0 0;padding-left:16px;color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35}.rules-diagnostics__details li{overflow-wrap:anywhere}.rules-diagnostics__item--warn{border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 52%,var(--md-sys-color-outline-variant))}.rules-diagnostics__item--error{border-color:var(--md-sys-color-error)}.rules-diagnostics__status{font-weight:600;margin-top:1px}.rules-diagnostics__action{min-width:0;height:28px;padding:0 10px;border-radius:999px;font-size:12px;line-height:1}.rules-diagnostics__action mat-icon{width:16px;height:16px;margin:0 4px 0 0;font-size:16px}.json-field{width:100%}.presentation-layout{display:flex;gap:20px;align-items:flex-start}.presentation-controls{flex:1 1 60%;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px}.control{display:flex;flex-direction:column}.control-span{grid-column:1/-1}.block-status{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 35%,transparent);color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.45}.block-status strong{min-width:112px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.block-status--implicit{background:color-mix(in srgb,var(--md-sys-color-surface-variant) 42%,transparent);border:1px dashed var(--md-sys-color-outline)}.block-status--readonly{margin-bottom:12px}.block-status code{font-family:var(--md-ref-typeface-mono, \"Courier New\", monospace);font-size:11px}.control__label{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-bottom:6px}.toggle-group{width:100%}.control--inline{grid-column:1/-1;display:flex;gap:16px;align-items:center}.presentation-preview{flex:0 0 360px;position:sticky;top:16px}.preview-card{border:1px solid var(--md-sys-color-outline);border-radius:12px;padding:14px;background:var(--md-sys-color-surface-container)}.preview-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.preview-row:last-child{border-bottom:none}.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}.presentation-preview .praxis-presentation__label{color:var(--md-sys-color-on-surface-variant)}.presentation-preview .praxis-presentation__value{color:var(--md-sys-color-on-surface)}.presentation-preview .presentation-mode.pres-density-cozy .preview-row{padding:6px 0}.presentation-preview .presentation-mode.pres-density-compact .preview-row,.presentation-preview .presentation-mode.pres-compact .preview-row{padding:2px 0}.presentation-preview .presentation-mode.pres-label-left .preview-row{display:grid;grid-template-columns:var(--pfx-pres-label-width, 140px) 1fr;align-items:baseline;column-gap:10px}.presentation-preview .presentation-mode.pres-label-left .praxis-presentation__label{margin:0;text-align:var(--pfx-pres-label-align, start)}.presentation-preview .presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-preview h4{margin:0 0 8px;color:var(--md-sys-color-on-surface);font-size:1rem}.section-card{border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-level1, none)}.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.tab-content--dense{padding:12px 16px 16px}.tab-content--dense .section-header,.tab-content--dense .form-row{margin-bottom:8px}.section-header h3{margin:0;font-size:1.05rem;color:var(--md-sys-color-on-surface)}.text-caption{margin:6px 0 0;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.section-header--compact{margin-bottom:8px}.section-body{display:block}.section-body--flex{flex:1;min-height:0;display:flex;flex-direction:column}.builder-header{padding:12px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.builder-header h3{margin:0;font-size:1rem;color:var(--md-sys-color-on-surface)}.hint{margin:8px 0 0;padding:10px 12px;border-radius:10px;border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}.meta-card{display:grid;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.meta-row strong{color:var(--md-sys-color-on-surface);font-weight:600}.runtime-contract-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.runtime-contract-field{display:grid;gap:6px;padding:12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.runtime-contract-label{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.runtime-contract-code{display:block;font-family:var(--md-ref-typeface-mono, \"Courier New\", monospace);font-size:12px;line-height:1.45;color:var(--md-sys-color-on-surface);word-break:break-word;white-space:normal}.command-rules-card{margin:16px;min-width:0;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container)}.command-rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;align-items:start;min-width:0}.command-rules-toolbar,.command-rules-options,.command-rules-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.command-rules-select{min-width:min(320px,100%)}.command-rules-full{grid-column:1/-1}.command-rule-condition-builder{min-height:420px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.command-rules-payload-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;min-width:0;padding:12px;border:1px dashed var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.command-rules-section-title{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase}.command-rules-surface-editor{grid-column:1/-1}.command-rule-preview{display:grid;gap:8px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface)}.command-rule-preview--invalid{border-color:var(--md-sys-color-error)}.command-rule-preview__row{display:grid;grid-template-columns:minmax(96px,.35fr) minmax(0,1fr);gap:8px;align-items:start;min-width:0}.command-rule-preview__row span{color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:600}.command-rule-preview__row strong,.command-rule-preview__row code{min-width:0;overflow-wrap:anywhere}.command-rule-preview__diagnostics{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant)}@media(max-width:768px){.mobile-tab-selector{display:block}::ng-deep .mat-mdc-tab-group.config-tabs>.mat-mdc-tab-header{display:none}.tab-content{padding:12px}.json-tab-content{padding:8px}.section-card--json{min-height:auto}}\n"] }]
+                    ], providers: [FormConfigService], template: "<div class=\"mobile-tab-selector\">\n  <mat-form-field appearance=\"outline\" class=\"mobile-tab-selector__field\">\n    <mat-label>{{ tx('config.tabs.mobileLabel', 'Se\u00E7\u00E3o do editor') }}</mat-label>\n    <mat-select [(ngModel)]=\"selectedConfigTabIndex\" data-testid=\"dynamic-form-config-editor-mobile-tabs\">\n      @for (tab of configTabOptions; track tab.key) {\n        <mat-option [value]=\"tab.index\">{{ tab.label }}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-tab-group class=\"config-tabs\" data-testid=\"dynamic-form-config-editor-tabs\" [(selectedIndex)]=\"selectedConfigTabIndex\">\n  <mat-tab [label]=\"configTabLabel('general')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-geral\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.general.title', 'Dados do formul\u00E1rio') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.general.subtitle', 'Defina o modo de dados e o contexto de edi\u00E7\u00E3o.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.general.inputMode.label', 'Modo de dados') }}</mat-label>\n                <mat-select [(ngModel)]=\"inputMode\" (ngModelChange)=\"onInputModeChange()\">\n                  <mat-option value=\"create\">{{ tx('config.general.inputMode.create', 'create') }}</mat-option>\n                  <mat-option value=\"edit\">{{ tx('config.general.inputMode.edit', 'edit') }}</mat-option>\n                  <mat-option value=\"view\">{{ tx('config.general.inputMode.view', 'view') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isBindingsBlockPersisted()\">\n              <strong>{{ tx('config.general.bindings.label', 'Bindings') }}</strong>\n              @if (isBindingsBlockPersisted()) {\n                <span>{{ tx('config.general.bindings.persisted', '`bindings.mode` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.general.bindings.implicit', 'Bloco ausente no documento can\u00F4nico. O valor exibido \u00E9 fallback visual e n\u00E3o ser\u00E1 salvo at\u00E9 voc\u00EA editar este campo.') }}\n              }\n            </div>\n            <div class=\"section-help\">\n              <span class=\"section-help__label\">{{ tx('config.common.understand', 'Entenda:') }}</span>\n              <button\n                praxisIconButton=\"help_outline\"\n                size=\"dense\"\n                class=\"help-icon-button\"\n                type=\"button\"\n                [matTooltip]=\"tx('config.general.inputMode.tooltip', 'O mode controla o fluxo (create/edit/view). enableCustomization s\u00F3 libera edi\u00E7\u00E3o do layout e n\u00E3o altera o mode.')\"\n                matTooltipPosition=\"above\"\n                >\n              </button>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n\n      @if (hasResolvedRuntimeContract()) {\n        <mat-card\n          class=\"section-card\"\n          data-testid=\"config-tab-runtime-contract\"\n          >\n          <mat-card-content>\n            <div class=\"section-header\">\n              <div>\n                <h3>{{ tx('config.general.runtimeContract.title', 'Contrato Runtime Resolvido') }}</h3>\n                <p class=\"text-caption\">\n                  {{ tx('config.general.runtimeContract.subtitle', 'Visualiza\u00E7\u00E3o somente leitura do contrato backend resolvido pelo host atual.') }}\n                </p>\n              </div>\n            </div>\n            <div class=\"block-status block-status--readonly\">\n              <strong>{{ tx('config.general.runtimeContract.runtimeLabel', 'Runtime') }}</strong>\n              <span>\n                {{ tx('config.general.runtimeContract.readonly', 'Esses valores v\u00EAm do host/runtime atual e n\u00E3o s\u00E3o persistidos em `bindings` nem em `contextSnapshot`.') }}\n              </span>\n            </div>\n            <div class=\"runtime-contract-grid\">\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.schemaUrl', 'Schema URL') }}</span>\n                <code class=\"runtime-contract-code\">{{ runtimeContract?.schemaUrl || '\u2014' }}</code>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.schemaSource', 'Origem do schema') }}</span>\n                <strong>{{ describeRuntimeSource(runtimeContract?.schemaSource) }}</strong>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitMethod', 'Submit method') }}</span>\n                <strong>{{ runtimeContract?.submitMethod || '\u2014' }}</strong>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitUrl', 'Submit URL') }}</span>\n                <code class=\"runtime-contract-code\">{{ runtimeContract?.submitUrl || '\u2014' }}</code>\n              </div>\n              <div class=\"runtime-contract-field\">\n                <span class=\"runtime-contract-label\">{{ tx('config.general.runtimeContract.submitSource', 'Origem do submit') }}</span>\n                <strong>{{ describeRuntimeSource(runtimeContract?.submitSource) }}</strong>\n              </div>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      }\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('schema')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-schema\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.schema.title', 'Valida\u00E7\u00E3o de schema') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.schema.subtitle', 'Controle avisos quando o schema do servidor mudar.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.schema.notify.label', 'Notificar quando desatualizado') }}</mat-label>\n                <mat-select [(ngModel)]=\"schemaPrefs.notifyIfOutdated\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-notify')\">\n                  <mat-option value=\"both\">{{ tx('config.schema.notify.both', 'Banner + Snackbar') }}</mat-option>\n                  <mat-option value=\"inline\">{{ tx('config.schema.notify.inline', 'Somente Banner') }}</mat-option>\n                  <mat-option value=\"snackbar\">{{ tx('config.schema.notify.snackbar', 'Somente Snackbar') }}</mat-option>\n                  <mat-option value=\"none\">{{ tx('config.schema.notify.none', 'Nenhum') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.schema.snooze.label', 'Intervalo de sil\u00EAncio (ms)') }}</mat-label>\n                <input matInput type=\"number\" [(ngModel)]=\"schemaPrefs.snoozeMs\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-snooze')\" />\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-slide-toggle [(ngModel)]=\"schemaPrefs.autoOpenSettingsOnOutdated\" (ngModelChange)=\"onSchemaPrefsChange('schema-prefs-auto-open')\">\n                {{ tx('config.schema.autoOpenSettings', 'Abrir configura\u00E7\u00F5es automaticamente') }}\n              </mat-slide-toggle>\n            </div>\n            @if (serverMeta) {\n              <div class=\"form-row\">\n                <div class=\"meta-card\">\n                  <div class=\"meta-row\">\n                    <span>{{ tx('config.schema.meta.serverHash', 'Server hash') }}</span>\n                    <strong>{{ serverMeta.serverHash || '\u2014' }}</strong>\n                  </div>\n                  <div class=\"meta-row\">\n                    <span>{{ tx('config.schema.meta.lastVerifiedAt', '\u00DAltima verifica\u00E7\u00E3o') }}</span>\n                    <strong>{{ serverMeta.lastVerifiedAt || '\u2014' }}</strong>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isSchemaPrefsBlockPersisted()\">\n              <strong>{{ tx('config.schema.prefs.label', 'Schema Prefs') }}</strong>\n              @if (isSchemaPrefsBlockPersisted()) {\n                <span>{{ tx('config.schema.prefs.persisted', '`contextSnapshot.schemaPrefs` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.schema.prefs.implicit', 'Bloco ausente no documento can\u00F4nico. Os controles exibem fallback visual e n\u00E3o ser\u00E3o salvos at\u00E9 voc\u00EA editar.') }}\n              }\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('layout')\">\n    <div class=\"tab-content tab-content--full\" data-testid=\"config-tab-panel-layout\">\n      <div class=\"section-header section-header--compact\">\n        <div>\n          <h3>{{ tx('config.layout.title', 'Layout do formul\u00E1rio') }}</h3>\n          <p class=\"text-caption\">{{ tx('config.layout.subtitle', 'Organize se\u00E7\u00F5es, linhas e campos com drag & drop.') }}</p>\n        </div>\n      </div>\n      <div class=\"section-body section-body--flex\">\n        <praxis-layout-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"\n        (select)=\"onLayoutSelect($event)\"></praxis-layout-editor>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('hooks')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-hooks\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.hooks.title', 'Hooks de ciclo de vida') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.hooks.subtitle', 'Automatize a\u00E7\u00F5es nos eventos do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <praxis-hooks-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-hooks-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  @if (isPresentationMode) {\n    <mat-tab [label]=\"configTabLabel('presentation')\">\n      <div class=\"tab-content\" data-testid=\"config-tab-panel-presentation\">\n        <mat-card class=\"section-card\">\n          <mat-card-content>\n            <div class=\"section-header\">\n              <div>\n                <h3>{{ tx('config.presentation.title', 'Modo Apresenta\u00E7\u00E3o') }}</h3>\n                <p class=\"text-caption\">{{ tx('config.presentation.subtitle', 'Configura\u00E7\u00F5es de exibi\u00E7\u00E3o aplicadas somente ao modo apresenta\u00E7\u00E3o.') }}</p>\n              </div>\n            </div>\n            <div class=\"presentation-layout\">\n              <div class=\"presentation-controls\">\n                <div class=\"block-status control-span\" [class.block-status--implicit]=\"!isPresentationBlockPersisted()\">\n                  <strong>{{ tx('config.presentation.block.label', 'Presentation') }}</strong>\n                  @if (isPresentationBlockPersisted()) {\n                    <span>{{ tx('config.presentation.block.persisted', '`contextSnapshot.presentation` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n                  } @else {\n                    {{ tx('config.presentation.block.implicit', 'Bloco ausente no documento can\u00F4nico. A pr\u00E9-visualiza\u00E7\u00E3o usa fallback local e n\u00E3o ser\u00E1 salva at\u00E9 voc\u00EA editar.') }}\n                  }\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.labelPosition.label', 'Posi\u00E7\u00E3o do r\u00F3tulo') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.labelPosition\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-position')\" [attr.aria-label]=\"tx('config.presentation.labelPosition.ariaLabel', 'Posi\u00E7\u00E3o do r\u00F3tulo')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"above\">\n                      <mat-icon>view_stream</mat-icon>\n                      <span class=\"sr-only\">{{ tx('config.presentation.labelPosition.above', 'Acima') }}</span>\n                    </mat-button-toggle>\n                    <mat-button-toggle value=\"left\">\n                      <mat-icon>view_column</mat-icon>\n                      <span class=\"sr-only\">{{ tx('config.presentation.labelPosition.left', '\u00C0 esquerda') }}</span>\n                    </mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.density.label', 'Densidade') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.density\" (ngModelChange)=\"onPresentationPrefsChange('presentation-density')\" [attr.aria-label]=\"tx('config.presentation.density.ariaLabel', 'Densidade')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"comfortable\">{{ tx('config.presentation.density.comfortable', 'Confort\u00E1vel') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"cozy\">{{ tx('config.presentation.density.cozy', 'Intermedi\u00E1ria') }}</mat-button-toggle>\n                    <mat-button-toggle value=\"compact\">{{ tx('config.presentation.density.compact', 'Compacta') }}</mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.labelAlign.label', 'Alinhamento do r\u00F3tulo') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.labelAlign\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-align')\" [attr.aria-label]=\"tx('config.presentation.labelAlign.ariaLabel', 'Alinhamento do r\u00F3tulo')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"start\"><mat-icon>format_align_left</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"center\"><mat-icon>format_align_center</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"end\"><mat-icon>format_align_right</mat-icon></mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <label class=\"control__label\">{{ tx('config.presentation.valueAlign.label', 'Alinhamento do valor') }}</label>\n                  <mat-button-toggle-group [(ngModel)]=\"presentationPrefs.valueAlign\" (ngModelChange)=\"onPresentationPrefsChange('presentation-value-align')\" [attr.aria-label]=\"tx('config.presentation.valueAlign.ariaLabel', 'Alinhamento do valor')\"\n                    class=\"toggle-group\">\n                    <mat-button-toggle value=\"start\"><mat-icon>format_align_left</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"center\"><mat-icon>format_align_center</mat-icon></mat-button-toggle>\n                    <mat-button-toggle value=\"end\"><mat-icon>format_align_right</mat-icon></mat-button-toggle>\n                  </mat-button-toggle-group>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.labelFontSize.label', 'Tamanho do r\u00F3tulo') }}</mat-label>\n                    <input matInput type=\"number\" min=\"10\" [(ngModel)]=\"presentationPrefs.labelFontSize\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-font-size')\"\n                      [placeholder]=\"tx('config.presentation.labelFontSize.placeholder', 'ex.: 12')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.valueFontSize.label', 'Tamanho do valor') }}</mat-label>\n                    <input matInput type=\"number\" min=\"10\" [(ngModel)]=\"presentationPrefs.valueFontSize\" (ngModelChange)=\"onPresentationPrefsChange('presentation-value-font-size')\"\n                      [placeholder]=\"tx('config.presentation.valueFontSize.placeholder', 'ex.: 16')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control\">\n                  <mat-form-field appearance=\"fill\" class=\"w-100\">\n                    <mat-label>{{ tx('config.presentation.labelWidth.label', 'Largura do r\u00F3tulo (label \u00E0 esquerda)') }}</mat-label>\n                    <input matInput type=\"number\" min=\"60\" [(ngModel)]=\"presentationPrefs.labelWidth\" (ngModelChange)=\"onPresentationPrefsChange('presentation-label-width')\"\n                      [placeholder]=\"tx('config.presentation.labelWidth.placeholder', 'ex.: 140')\" />\n                    <span matSuffix>px</span>\n                  </mat-form-field>\n                </div>\n                <div class=\"control control--inline\">\n                  <mat-slide-toggle [(ngModel)]=\"presentationPrefs.compact\" (ngModelChange)=\"onPresentationPrefsChange('presentation-compact')\">\n                    {{ tx('config.presentation.options.compactMode', 'Modo compacto') }}\n                  </mat-slide-toggle>\n                  <mat-checkbox [(ngModel)]=\"truncatePreview\">\n                    {{ tx('config.presentation.options.truncateValues', 'Truncar valores') }}\n                  </mat-checkbox>\n                </div>\n              </div>\n              <div class=\"presentation-preview\">\n                <h4>{{ tx('config.presentation.preview.title', 'Pr\u00E9-visualiza\u00E7\u00E3o') }}</h4>\n                <div class=\"preview-card\">\n                <div class=\"praxis-dynamic-form presentation-mode\" [ngClass]=\"{\n                           'pres-compact': !!presentationPrefs.compact,\n                           'pres-label-left': presentationPrefs.labelPosition === 'left',\n                           'pres-label-above': presentationPrefs.labelPosition === 'above',\n                           'pres-density-compact': presentationPrefs.density === 'compact',\n                           'pres-density-cozy': presentationPrefs.density === 'cozy'\n                         }\" [style.--pfx-pres-label-size]=\"(presentationPrefs.labelFontSize || 12) + 'px'\"\n                    [style.--pfx-pres-value-size]=\"(presentationPrefs.valueFontSize || 16) + 'px'\"\n                    [style.--pfx-pres-label-width]=\"(presentationPrefs.labelWidth || 140) + 'px'\"\n                    [style.--pfx-pres-label-align]=\"presentationPrefs.labelAlign || 'start'\"\n                    [style.--pfx-pres-value-align]=\"presentationPrefs.valueAlign || 'start'\">\n                    @for (item of previewItems; track item) {\n                      <div class=\"preview-row\">\n                        <span class=\"praxis-presentation__label\">{{ item.label }}</span>\n                        <span class=\"praxis-presentation__value\" [title]=\"truncatePreview ? item.value : null\"\n                          [style.maxWidth]=\"truncatePreview ? '280px' : null\"\n                          [style.overflow]=\"truncatePreview ? 'hidden' : null\"\n                          [style.textOverflow]=\"truncatePreview ? 'ellipsis' : null\"\n                          [style.whiteSpace]=\"truncatePreview ? 'nowrap' : 'normal'\">\n                          {{ item.value }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"section-help\">\n              <span class=\"section-help__label\">{{ tx('config.common.understand', 'Entenda:') }}</span>\n              <button\n                praxisIconButton=\"help_outline\"\n                size=\"dense\"\n                class=\"help-icon-button\"\n                type=\"button\"\n                [matTooltip]=\"tx('config.presentation.help.tooltip', 'Ajustes aplicam somente ao Modo Apresenta\u00E7\u00E3o e s\u00E3o salvos por formul\u00E1rio (via CSS/Classes).')\"\n                matTooltipPosition=\"above\"\n                >\n              </button>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </mat-tab>\n  }\n  <mat-tab [label]=\"configTabLabel('behavior')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-comportamento\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.behavior.title', 'Comportamento') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.behavior.subtitle', 'Ajuste valida\u00E7\u00F5es e respostas do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <praxis-behavior-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-behavior-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('hints')\">\n    <div class=\"tab-content tab-content--dense\" data-testid=\"config-tab-panel-hints\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.hints.title', 'Dicas dos modos') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.hints.subtitle', 'Personalize textos de apoio para modos de dados e estados de UI.') }}</p>\n            </div>\n          </div>\n          <p class=\"text-caption\">{{ tx('config.hints.description', 'Personalize os textos usados como tooltip/hint para modos de dados e modos globais de UI.') }}</p>\n\n          <div class=\"grid-2-cols grid-2-cols--compact\">\n            <section>\n              <h4>{{ tx('config.hints.dataModes.title', 'Modos de dados') }}</h4>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.create.label', 'Criar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.create\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-create')\" [placeholder]=\"tx('config.hints.dataModes.create.placeholder', 'Ex.: Preencha os campos obrigat\u00F3rios.')\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.edit.label', 'Editar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.edit\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-edit')\" [placeholder]=\"tx('config.hints.dataModes.edit.placeholder', 'Ex.: Revise os dados antes de salvar.')\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.dataModes.view.label', 'Visualizar') }}</mat-label>\n                <input matInput [(ngModel)]=\"editedConfig.hints!.dataModes.view\"\n                  (ngModelChange)=\"updateDirtyState('hints-data-view')\" [placeholder]=\"tx('config.hints.dataModes.view.placeholder', 'Ex.: Visualiza\u00E7\u00E3o somente leitura.')\" />\n              </mat-form-field>\n            </section>\n\n            <section>\n              <h4>{{ tx('config.hints.uiModes.title', 'Modos de UI') }}</h4>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.presentation.label', 'Apresenta\u00E7\u00E3o') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.presentation\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-presentation')\" [placeholder]=\"tx('config.hints.uiModes.presentation.placeholder', 'Ex.: Modo compacto para leitura r\u00E1pida.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.readonly.label', 'Leitura (readonly)') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.readonly\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-readonly')\" [placeholder]=\"tx('config.hints.uiModes.readonly.placeholder', 'Ex.: Campos bloqueados para edi\u00E7\u00E3o.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.disabled.label', 'Desabilitado') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.disabled\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-disabled')\" [placeholder]=\"tx('config.hints.uiModes.disabled.placeholder', 'Ex.: Fun\u00E7\u00E3o indispon\u00EDvel no momento.')\"></textarea>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.hints.uiModes.visible.label', 'Vis\u00EDvel') }}</mat-label>\n                <textarea matInput rows=\"2\" [(ngModel)]=\"editedConfig.hints!.uiModes.visible\"\n                (ngModelChange)=\"updateDirtyState('hints-ui-visible')\" [placeholder]=\"tx('config.hints.uiModes.visible.placeholder', 'Ex.: Campo exibido conforme permiss\u00F5es.')\"></textarea>\n              </mat-form-field>\n            </section>\n          </div>\n\n          <section>\n            <h4>{{ tx('config.helpPresentation.title', 'Apresenta\u00E7\u00E3o das ajudas dos campos') }}</h4>\n            <p class=\"text-caption\">{{ tx('config.helpPresentation.description', 'Controle como hint/helpText dos campos aparece em formul\u00E1rios densos. Erros de valida\u00E7\u00E3o continuam inline.') }}</p>\n            <div class=\"grid-3-cols\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.display.label', 'Exibi\u00E7\u00E3o') }}</mat-label>\n                <mat-select [ngModel]=\"helpPresentationDraft.display\" (ngModelChange)=\"onHelpPresentationDisplayChange($event)\">\n                  <mat-option value=\"inline\">{{ tx('config.helpPresentation.display.inline', 'Inline') }}</mat-option>\n                  <mat-option value=\"popover\">{{ tx('config.helpPresentation.display.popover', '\u00CDcone de ajuda') }}</mat-option>\n                  <mat-option value=\"auto\">{{ tx('config.helpPresentation.display.auto', 'Autom\u00E1tica') }}</mat-option>\n                  <mat-option value=\"hidden\">{{ tx('config.helpPresentation.display.hidden', 'Oculta') }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.inlineMaxLength.label', 'Limite inline') }}</mat-label>\n                <input matInput type=\"number\" min=\"0\" [ngModel]=\"helpPresentationDraft.inlineMaxLength\"\n                  (ngModelChange)=\"onHelpPresentationInlineMaxLengthChange($event)\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.helpPresentation.preferPopoverForControls.label', 'Preferir \u00EDcone em') }}</mat-label>\n                <input matInput [ngModel]=\"getHelpPreferPopoverControlsText()\"\n                  (ngModelChange)=\"onHelpPreferPopoverControlsChange($event)\"\n                  [placeholder]=\"tx('config.helpPresentation.preferPopoverForControls.placeholder', 'toggle, checkbox, select')\" />\n              </mat-form-field>\n            </div>\n          </section>\n\n          <div class=\"actions-row\">\n            <button mat-stroked-button color=\"primary\" type=\"button\" (click)=\"restoreHintsDefaults()\">\n              <mat-icon>restore</mat-icon>\n              {{ tx('config.hints.actions.restoreDefaults', 'Restaurar padr\u00F5es') }}\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('actions')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-acoes\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.actions.title', 'A\u00E7\u00F5es do formul\u00E1rio') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.actions.subtitle', 'Configure bot\u00F5es padr\u00E3o e a\u00E7\u00F5es customizadas.') }}</p>\n            </div>\n          </div>\n          <praxis-actions-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-actions-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('rules')\">\n    <div class=\"tab-content visual-builder-content\" data-testid=\"config-tab-panel-regras\">\n      <div class=\"builder-header\">\n        <div>\n          <h3>{{ tx('config.rules.title', 'Regras visuais') }}</h3>\n          <p class=\"text-caption\">{{ tx('config.rules.subtitle', 'Defina visibilidade, estilos e rea\u00E7\u00F5es baseadas em condi\u00E7\u00F5es.') }}</p>\n        </div>\n      </div>\n      @if (ruleDiagnostics.length) {\n        <div class=\"rules-diagnostics\" data-testid=\"rules-diagnostics-panel\">\n          <div class=\"rules-diagnostics__summary\">\n            <span class=\"rules-diagnostics__pill rules-diagnostics__pill--total\">\n              {{ tx('config.rules.summary.total', '{{count}} regras', { count: ruleDiagnosticsSummary.total }) }}\n            </span>\n            @if (ruleDiagnosticsSummary.invalid) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--error\">\n                {{ tx('config.rules.summary.invalid', '{{count}} inv\u00E1lidas', { count: ruleDiagnosticsSummary.invalid }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.unsupported) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.unsupported', '{{count}} com propriedades rejeitadas', { count: ruleDiagnosticsSummary.unsupported }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.runtimeOnly) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.runtimeOnly', '{{count}} runtime only', { count: ruleDiagnosticsSummary.runtimeOnly }) }}\n              </span>\n            }\n            @if (ruleDiagnosticsSummary.pendingReview) {\n              <span class=\"rules-diagnostics__pill rules-diagnostics__pill--warn\">\n                {{ tx('config.rules.summary.pendingReview', '{{count}} pendentes de revis\u00E3o', { count: ruleDiagnosticsSummary.pendingReview }) }}\n              </span>\n            }\n          </div>\n          <div class=\"rules-diagnostics__list\" [attr.aria-label]=\"tx('config.rules.diagnostics.ariaLabel', 'Diagn\u00F3stico das regras')\">\n            @for (diagnostic of ruleDiagnostics; track diagnostic) {\n              <article class=\"rules-diagnostics__item\"\n                [class.rules-diagnostics__item--error]=\"getRuleStatusTone(diagnostic) === 'error'\"\n                [class.rules-diagnostics__item--warn]=\"getRuleStatusTone(diagnostic) === 'warn'\">\n                <div>\n                  <strong>{{ diagnostic.ruleName || diagnostic.ruleId }}</strong>\n                  <span>\n                    {{ tx('config.rules.diagnostics.targetConditionSummary', '{{targets}} alvo(s) \u00B7 {{conditions}} campo(s) na condi\u00E7\u00E3o', { targets: diagnostic.targetRefs.length, conditions: diagnostic.conditionRefs.length }) }}\n                  </span>\n                  @if (getRuleDiagnosticDetails(diagnostic).length) {\n                    <ul class=\"rules-diagnostics__details\">\n                      @for (detail of getRuleDiagnosticDetails(diagnostic); track detail) {\n                        <li>{{ detail }}</li>\n                      }\n                    </ul>\n                  }\n                </div>\n                <div class=\"rules-diagnostics__actions\">\n                  <span class=\"rules-diagnostics__status\">{{ getRuleStatusLabel(diagnostic) }}</span>\n                  @if (canApplyRulePropertyFix(diagnostic)) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [matTooltip]=\"tx('config.rules.actions.fix.tooltip', 'Aplicar whitelist e saneamento de propriedades nesta regra')\"\n                      (click)=\"applyRulePropertyFix(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                      {{ tx('config.rules.actions.fix', 'Corrigir') }}\n                    </button>\n                  }\n                  @if (diagnostic.status.includes('llm-generated-pending-review')) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [disabled]=\"!canAcceptPendingLlmRule(diagnostic)\"\n                      [matTooltip]=\"canAcceptPendingLlmRule(diagnostic) ? tx('config.rules.actions.accept.tooltip.ready', 'Aceitar sugest\u00E3o e atualizar estado visual') : tx('config.rules.actions.accept.tooltip.blocked', 'Corrija alvo, condi\u00E7\u00E3o e propriedades antes de aceitar')\"\n                      (click)=\"acceptPendingLlmRule(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">check</mat-icon>\n                      {{ tx('config.rules.actions.accept', 'Aceitar') }}\n                    </button>\n                  }\n                  @if (canOpenRuleJsonReview(diagnostic)) {\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      class=\"rules-diagnostics__action\"\n                      [matTooltip]=\"tx('config.rules.actions.reviewJson.tooltip', 'Abrir a aba JSON para revisar esta regra sem convers\u00E3o visual')\"\n                      (click)=\"openRuleJsonReview(diagnostic.ruleId)\">\n                      <mat-icon aria-hidden=\"true\">data_object</mat-icon>\n                      {{ tx('config.rules.actions.reviewJson', 'Ver JSON') }}\n                    </button>\n                  }\n                </div>\n              </article>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"rules-diagnostics rules-diagnostics--empty\" data-testid=\"rules-diagnostics-empty\">\n          {{ tx('config.rules.empty', 'Nenhuma regra definida ainda. Crie uma regra para ver alvos, condi\u00E7\u00E3o, propriedades e compatibilidade do builder.') }}\n        </div>\n      }\n      <praxis-visual-builder [config]=\"ruleBuilderConfig\" [initialRules]=\"ruleBuilderState\"\n      (rulesChanged)=\"onRulesChanged($event)\"></praxis-visual-builder>\n      <praxis-rule-properties-panel\n        [rules]=\"currentRules\"\n        [visualBlockNodes]=\"visualBlockNodeOptions\"\n        (rulesChange)=\"onRulePropertiesChanged($event)\"\n      ></praxis-rule-properties-panel>\n      <mat-card class=\"command-rules-card\" data-testid=\"form-command-rules-editor\">\n        <mat-card-title>{{ tx('config.commandRules.title', 'Comandos condicionais') }}</mat-card-title>\n        <mat-card-subtitle>{{ tx('config.commandRules.subtitle', 'Execute a\u00E7\u00F5es globais quando uma condi\u00E7\u00E3o do formul\u00E1rio for satisfeita.') }}</mat-card-subtitle>\n        <mat-card-content>\n          <div class=\"command-rules-grid\">\n            <div class=\"command-rules-toolbar\">\n              <mat-form-field appearance=\"fill\" class=\"command-rules-select\">\n                <mat-label>{{ tx('config.commandRules.command.label', 'Comando') }}</mat-label>\n                <mat-select [(ngModel)]=\"selectedCommandRuleId\" (selectionChange)=\"onCommandRuleSelectionChange()\">\n                  @for (rule of commandRules; track rule) {\n                    <mat-option [value]=\"rule.id\">\n                      {{ rule.id }}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <button mat-stroked-button type=\"button\" (click)=\"addCommandRule()\">\n                <mat-icon aria-hidden=\"true\">add</mat-icon>\n                {{ tx('config.commandRules.actions.add', 'Adicionar') }}\n              </button>\n              <button mat-stroked-button color=\"warn\" type=\"button\" (click)=\"deleteCommandRule()\" [disabled]=\"!selectedCommandRuleId\">\n                <mat-icon aria-hidden=\"true\">delete</mat-icon>\n                {{ tx('config.commandRules.actions.remove', 'Remover') }}\n              </button>\n            </div>\n\n            @if (selectedCommandRuleId) {\n              <div class=\"command-rule-condition-builder command-rules-full\">\n                <praxis-visual-builder\n                  mode=\"condition\"\n                  [config]=\"ruleBuilderConfig\"\n                  [initialCondition]=\"commandRuleCondition\"\n                  (conditionChanged)=\"onCommandConditionChanged($event)\"\n                ></praxis-visual-builder>\n              </div>\n            }\n\n            <mat-form-field appearance=\"fill\" class=\"command-rules-full\">\n              <mat-label>{{ tx('config.commandRules.conditionJson.label', 'Condi\u00E7\u00E3o JSON Logic') }}</mat-label>\n              <textarea\n                matInput\n                rows=\"5\"\n                [(ngModel)]=\"commandRuleConditionJson\"\n                [attr.aria-label]=\"tx('config.commandRules.conditionJson.ariaLabel', 'Condi\u00E7\u00E3o JSON Logic do comando condicional')\"\n              ></textarea>\n            </mat-form-field>\n\n            <mat-form-field appearance=\"fill\">\n              <mat-label>{{ tx('config.commandRules.globalAction.label', 'A\u00E7\u00E3o global') }}</mat-label>\n              <mat-select [(ngModel)]=\"commandRuleActionId\" (selectionChange)=\"onCommandActionChange()\">\n                @for (action of globalActionCatalog; track action) {\n                  <mat-option [value]=\"action.id\">\n                    {{ action.label || action.id }}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n\n            <mat-form-field appearance=\"fill\">\n              <mat-label>{{ tx('config.commandRules.distinctBy.label', 'distinctBy') }}</mat-label>\n              <input matInput [(ngModel)]=\"commandRuleDistinctBy\" [placeholder]=\"tx('config.commandRules.distinctBy.placeholder', 'ex.: idade')\" />\n            </mat-form-field>\n\n            @if (commandRuleActionSchema; as actionSchema) {\n              <div\n                class=\"command-rules-payload-fields command-rules-full\"\n                >\n                <div class=\"command-rules-section-title\">{{ tx('config.commandRules.structuredPayload.title', 'Payload estruturado') }}</div>\n                @if (actionSchema.editorMode !== 'surface-open') {\n                  @for (field of actionSchema.fields; track field) {\n                    @if (shouldShowCommandActionField(field)) {\n                      @if (field.type === 'toggle') {\n                        <mat-slide-toggle\n                          [ngModel]=\"getCommandActionFieldValue(field)\"\n                          (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          >\n                          {{ field.label }}\n                        </mat-slide-toggle>\n                      } @else {\n                        <mat-form-field appearance=\"fill\">\n                          <mat-label>{{ field.label }}</mat-label>\n                          @if (field.type === 'textarea' || field.type === 'json') {\n                            <textarea\n                              matInput\n                              [rows]=\"field.rows || (field.type === 'json' ? 3 : 2)\"\n                              [ngModel]=\"getCommandActionFieldValue(field)\"\n                              (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                              [ngModelOptions]=\"{ standalone: true }\"\n                              [placeholder]=\"field.placeholder || (field.type === 'json' ? '{ }' : '')\"\n                              [required]=\"isCommandActionFieldRequired(field)\"\n                            ></textarea>\n                          } @else {\n                            @if (field.type === 'select') {\n                              <mat-select\n                                [ngModel]=\"getCommandActionFieldValue(field)\"\n                                (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                [required]=\"isCommandActionFieldRequired(field)\"\n                                >\n                                @for (option of field.options || []; track option) {\n                                  <mat-option [value]=\"option.value\">\n                                    {{ option.label }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input\n                                matInput\n                                [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                                [ngModel]=\"getCommandActionFieldValue(field)\"\n                                (ngModelChange)=\"onCommandActionFieldChange(field, $event)\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                [placeholder]=\"field.placeholder || ''\"\n                                [required]=\"isCommandActionFieldRequired(field)\"\n                                />\n                            }\n                          }\n                          @if (field.hint) {\n                            <mat-hint>{{ field.hint }}</mat-hint>\n                          }\n                          @if (hasCommandActionFieldError(field.key)) {\n                            <mat-error>\n                              {{ getCommandActionFieldError(field.key) }}\n                            </mat-error>\n                          }\n                          @if (!hasCommandActionFieldError(field.key) && isCommandActionFieldMissing(field)) {\n                            <mat-error>\n                              {{ tx('config.commandRules.validation.requiredField', 'Campo obrigat\u00F3rio.') }}\n                            </mat-error>\n                          }\n                        </mat-form-field>\n                      }\n                    }\n                  }\n                } @else {\n                  <praxis-surface-open-action-editor\n                    class=\"command-rules-surface-editor\"\n                    data-testid=\"form-command-rule-surface-open-editor\"\n                    [value]=\"commandRuleSurfaceOpenPayload\"\n                    hostKind=\"dynamic-form\"\n                    (valueChange)=\"onCommandSurfaceOpenPayloadChange($event)\"\n                  ></praxis-surface-open-action-editor>\n                }\n              </div>\n            }\n\n            <mat-form-field appearance=\"fill\" class=\"command-rules-full\">\n              <mat-label>{{ tx('config.commandRules.advancedPayload.label', 'Payload JSON avan\u00E7ado') }}</mat-label>\n              <textarea\n                matInput\n                rows=\"4\"\n                [(ngModel)]=\"commandRulePayloadJson\"\n                [attr.aria-label]=\"tx('config.commandRules.advancedPayload.ariaLabel', 'Payload JSON da a\u00E7\u00E3o global')\"\n              ></textarea>\n            </mat-form-field>\n\n            <div class=\"command-rules-options\">\n              <mat-slide-toggle [(ngModel)]=\"commandRuleDistinct\">{{ tx('config.commandRules.options.distinct', 'Evitar repeti\u00E7\u00E3o enquanto a condi\u00E7\u00E3o permanecer verdadeira') }}</mat-slide-toggle>\n              <mat-slide-toggle [(ngModel)]=\"commandRuleRunOnInitialEvaluation\">{{ tx('config.commandRules.options.runOnInitialEvaluation', 'Executar tamb\u00E9m na avalia\u00E7\u00E3o inicial') }}</mat-slide-toggle>\n            </div>\n\n            @if (commandRuleAuthoringError) {\n              <div class=\"preview-error command-rules-full\">\n                <mat-icon aria-hidden=\"true\">warning</mat-icon>\n                <span>{{ commandRuleAuthoringError }}</span>\n              </div>\n            }\n\n            <div\n              class=\"command-rule-preview command-rules-full\"\n              [class.command-rule-preview--invalid]=\"commandRulePreview.state === 'invalid'\"\n              data-testid=\"command-rule-preview\"\n              >\n              <div class=\"command-rules-section-title\">{{ tx('config.commandRules.preview.title', 'Preview do comando') }}</div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.mode', 'Modo') }}</span>\n                <strong>{{ commandRulePreview.executionMode }}</strong>\n              </div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.action', 'A\u00E7\u00E3o') }}</span>\n                <strong>{{ commandRulePreview.actionId || '\u2014' }}</strong>\n              </div>\n              <div class=\"command-rule-preview__row\">\n                <span>{{ tx('config.commandRules.preview.policy', 'Policy') }}</span>\n                <code>{{ commandRulePreview.policy | json }}</code>\n              </div>\n              @if (commandRulePreview.diagnostics.length) {\n                <div class=\"command-rule-preview__diagnostics\">\n                  <mat-icon aria-hidden=\"true\">{{ commandRulePreview.state === 'invalid' ? 'warning' : 'visibility' }}</mat-icon>\n                  <span>{{ commandRulePreview.diagnostics[0] }}</span>\n                </div>\n              }\n            </div>\n\n            <div class=\"command-rules-actions\">\n              <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"applyCommandRule()\">\n                <mat-icon aria-hidden=\"true\">check</mat-icon>\n                {{ tx('config.commandRules.actions.apply', 'Aplicar comando') }}\n              </button>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('cascades')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-cascatas\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.cascades.title', 'Depend\u00EAncias entre campos') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.cascades.subtitle', 'Configure cascatas e carregamento entre campos.') }}</p>\n            </div>\n          </div>\n          <praxis-cascade-manager-tab [fields]=\"editedConfig.fieldMetadata || []\"\n          (apply)=\"onCascadeApply($event)\"></praxis-cascade-manager-tab>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('messages')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-mensagens\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.messages.title', 'Mensagens e feedback') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.messages.subtitle', 'Padronize textos de sucesso, erro e confirma\u00E7\u00F5es.') }}</p>\n            </div>\n          </div>\n          <praxis-messages-editor [config]=\"editedConfig\" (configChange)=\"onConfigChange($event)\"></praxis-messages-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('navigation')\">\n    <div class=\"tab-content\" data-testid=\"config-tab-panel-navegacao\">\n      <mat-card class=\"section-card\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.navigation.title', 'Navega\u00E7\u00E3o de retorno') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.navigation.subtitle', 'Defina o comportamento do bot\u00E3o Voltar em fluxos CRUD.') }}</p>\n            </div>\n          </div>\n          <div class=\"form-grid\">\n            <div class=\"form-row\">\n              <mat-form-field appearance=\"fill\" class=\"w-100\">\n                <mat-label>{{ tx('config.navigation.returnTo.label', 'Rota de retorno') }}</mat-label>\n                <input matInput id=\"returnTo\" [(ngModel)]=\"backConfig!.returnTo\" (ngModelChange)=\"onBackConfigChange()\" [placeholder]=\"tx('config.navigation.returnTo.placeholder', '/funcionarios')\" />\n              </mat-form-field>\n            </div>\n            <div class=\"form-row\">\n              <mat-slide-toggle [(ngModel)]=\"backConfig!.confirmOnDirty\" (ngModelChange)=\"onBackConfigChange()\">\n                {{ tx('config.navigation.confirmOnDirty.label', 'Confirmar ao sair com altera\u00E7\u00F5es') }}\n              </mat-slide-toggle>\n            </div>\n            <div class=\"block-status\" [class.block-status--implicit]=\"!isBackConfigBlockPersisted()\">\n              <strong>{{ tx('config.navigation.backConfig.label', 'Back Config') }}</strong>\n              @if (isBackConfigBlockPersisted()) {\n                <span>{{ tx('config.navigation.backConfig.persisted', '`contextSnapshot.backConfig` ser\u00E1 persistido no documento can\u00F4nico.') }}</span>\n              } @else {\n                {{ tx('config.navigation.backConfig.implicit', 'Bloco ausente no documento can\u00F4nico. Os valores exibidos s\u00E3o fallback visual e n\u00E3o ser\u00E3o salvos at\u00E9 voc\u00EA editar.') }}\n              }\n            </div>\n          </div>\n          <div class=\"section-help\">\n            <span class=\"section-help__label\">{{ tx('config.navigation.note.label', 'Observa\u00E7\u00E3o:') }}</span>\n            <button\n              praxisIconButton=\"help_outline\"\n              size=\"dense\"\n              class=\"help-icon-button\"\n              type=\"button\"\n              [matTooltip]=\"tx('config.navigation.note.tooltip', 'Afeta o fluxo de navega\u00E7\u00E3o do CRUD e pode ser sobreposto por metadados do recurso.')\"\n              matTooltipPosition=\"above\"\n              >\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"configTabLabel('json')\">\n    <div class=\"tab-content json-tab-content\" data-testid=\"config-tab-panel-json\">\n      <mat-card class=\"section-card section-card--json\">\n        <mat-card-content>\n          <div class=\"section-header\">\n            <div>\n              <h3>{{ tx('config.json.title', 'Configura\u00E7\u00E3o JSON') }}</h3>\n              <p class=\"text-caption\">{{ tx('config.json.subtitle', 'Edi\u00E7\u00E3o avan\u00E7ada do documento can\u00F4nico de autoria do formul\u00E1rio.') }}</p>\n            </div>\n          </div>\n          <form-json-config-editor [document]=\"jsonDocument\" (documentChange)=\"onJsonConfigChange($event)\"\n            (validationChange)=\"onJsonValidationChange($event)\" (editorEvent)=\"onJsonEditorEvent($event)\">\n          </form-json-config-editor>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0}.mobile-tab-selector{display:none;flex:0 0 auto;padding:8px 16px 0;background:var(--md-sys-color-surface)}.mobile-tab-selector__field{width:100%}.config-tabs{flex:1 1 auto;min-height:0;min-width:0}::ng-deep .mat-mdc-tab-group.config-tabs{display:flex;flex-direction:column}::ng-deep .mat-mdc-tab-group.config-tabs .mat-mdc-tab-body-wrapper{flex:1;min-height:0;min-width:0}::ng-deep .mat-mdc-tab-group.config-tabs .mat-mdc-tab-body-content{height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:0!important}.tab-content{padding:16px 20px 20px;flex:1;min-width:0;box-sizing:border-box}.json-tab-content{min-width:0;padding:12px 16px 16px}.section-card--json{display:flex;flex:1;min-height:calc(100vh - 180px);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}.section-card--json>mat-card-content{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column}.section-card--json form-json-config-editor{display:block;flex:1;min-width:0;min-height:0}.form-row{display:block;margin-bottom:12px}.form-grid{display:grid;gap:12px}.section-help{display:inline-flex;align-items:center;gap:8px;color:var(--md-sys-color-on-surface-variant);font-size:12px}.section-help__label{font-weight:500}.grid-2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.grid-2-cols--compact{gap:12px}.w-100{width:100%}.visual-builder-content{padding:0!important;height:100%;min-width:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px}.visual-builder-content>praxis-visual-builder{flex:0 0 auto;min-width:0;min-height:clamp(360px,48vh,560px)}.visual-builder-content>praxis-rule-properties-panel{flex:0 0 auto;display:block;min-width:0;padding:0 16px 24px;box-sizing:border-box}.rules-diagnostics{flex:0 0 auto;display:grid;gap:10px;padding:12px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low)}.rules-diagnostics--empty{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.rules-diagnostics__summary,.rules-diagnostics__list{display:flex;flex-wrap:wrap;gap:8px}.rules-diagnostics__pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);font-size:12px;font-weight:600}.rules-diagnostics__pill--warn{background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 72%,transparent);color:var(--md-sys-color-on-tertiary-container)}.rules-diagnostics__pill--error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.rules-diagnostics__item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:min(100%,280px);padding:8px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.rules-diagnostics__item>div{display:grid;gap:2px;min-width:0}.rules-diagnostics__item strong{color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rules-diagnostics__item span{color:var(--md-sys-color-on-surface-variant);font-size:11px}.rules-diagnostics__actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}.rules-diagnostics__details{display:grid;gap:2px;margin:4px 0 0;padding-left:16px;color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35}.rules-diagnostics__details li{overflow-wrap:anywhere}.rules-diagnostics__item--warn{border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 52%,var(--md-sys-color-outline-variant))}.rules-diagnostics__item--error{border-color:var(--md-sys-color-error)}.rules-diagnostics__status{font-weight:600;margin-top:1px}.rules-diagnostics__action{min-width:0;height:28px;padding:0 10px;border-radius:999px;font-size:12px;line-height:1}.rules-diagnostics__action mat-icon{width:16px;height:16px;margin:0 4px 0 0;font-size:16px}.json-field{width:100%}.presentation-layout{display:flex;gap:20px;align-items:flex-start}.presentation-controls{flex:1 1 60%;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px}.control{display:flex;flex-direction:column}.control-span{grid-column:1/-1}.block-status{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 35%,transparent);color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.45}.block-status strong{min-width:112px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.block-status--implicit{background:color-mix(in srgb,var(--md-sys-color-surface-variant) 42%,transparent);border:1px dashed var(--md-sys-color-outline)}.block-status--readonly{margin-bottom:12px}.block-status code{font-family:var(--md-ref-typeface-mono, \"Courier New\", monospace);font-size:11px}.control__label{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-bottom:6px}.toggle-group{width:100%}.control--inline{grid-column:1/-1;display:flex;gap:16px;align-items:center}.presentation-preview{flex:0 0 360px;position:sticky;top:16px}.preview-card{border:1px solid var(--md-sys-color-outline);border-radius:12px;padding:14px;background:var(--md-sys-color-surface-container)}.preview-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.preview-row:last-child{border-bottom:none}.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}.presentation-preview .praxis-presentation__label{color:var(--md-sys-color-on-surface-variant)}.presentation-preview .praxis-presentation__value{color:var(--md-sys-color-on-surface)}.presentation-preview .presentation-mode.pres-density-cozy .preview-row{padding:6px 0}.presentation-preview .presentation-mode.pres-density-compact .preview-row,.presentation-preview .presentation-mode.pres-compact .preview-row{padding:2px 0}.presentation-preview .presentation-mode.pres-label-left .preview-row{display:grid;grid-template-columns:var(--pfx-pres-label-width, 140px) 1fr;align-items:baseline;column-gap:10px}.presentation-preview .presentation-mode.pres-label-left .praxis-presentation__label{margin:0;text-align:var(--pfx-pres-label-align, start)}.presentation-preview .presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-preview h4{margin:0 0 8px;color:var(--md-sys-color-on-surface);font-size:1rem}.section-card{border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-level1, none)}.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.tab-content--dense{padding:12px 16px 16px}.tab-content--dense .section-header,.tab-content--dense .form-row{margin-bottom:8px}.section-header h3{margin:0;font-size:1.05rem;color:var(--md-sys-color-on-surface)}.text-caption{margin:6px 0 0;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.section-header--compact{margin-bottom:8px}.section-body{display:block}.section-body--flex{flex:1;min-height:0;display:flex;flex-direction:column}.builder-header{padding:12px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.builder-header h3{margin:0;font-size:1rem;color:var(--md-sys-color-on-surface)}.hint{margin:8px 0 0;padding:10px 12px;border-radius:10px;border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}.meta-card{display:grid;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.meta-row strong{color:var(--md-sys-color-on-surface);font-weight:600}.runtime-contract-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.runtime-contract-field{display:grid;gap:6px;padding:12px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.runtime-contract-label{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.runtime-contract-code{display:block;font-family:var(--md-ref-typeface-mono, \"Courier New\", monospace);font-size:12px;line-height:1.45;color:var(--md-sys-color-on-surface);word-break:break-word;white-space:normal}.command-rules-card{margin:16px;min-width:0;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container)}.command-rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;align-items:start;min-width:0}.command-rules-toolbar,.command-rules-options,.command-rules-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.command-rules-select{min-width:min(320px,100%)}.command-rules-full{grid-column:1/-1}.command-rule-condition-builder{min-height:420px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.command-rules-payload-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;min-width:0;padding:12px;border:1px dashed var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.command-rules-section-title{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase}.command-rules-surface-editor{grid-column:1/-1}.command-rule-preview{display:grid;gap:8px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface)}.command-rule-preview--invalid{border-color:var(--md-sys-color-error)}.command-rule-preview__row{display:grid;grid-template-columns:minmax(96px,.35fr) minmax(0,1fr);gap:8px;align-items:start;min-width:0}.command-rule-preview__row span{color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:600}.command-rule-preview__row strong,.command-rule-preview__row code{min-width:0;overflow-wrap:anywhere}.command-rule-preview__diagnostics{display:flex;gap:8px;align-items:flex-start;color:var(--md-sys-color-on-surface-variant)}@media(max-width:768px){.mobile-tab-selector{display:block}::ng-deep .mat-mdc-tab-group.config-tabs>.mat-mdc-tab-header{display:none}.tab-content{padding:12px}.json-tab-content{padding:8px}.section-card--json{min-height:auto}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ASYNC_CONFIG_STORAGE]
@@ -32650,7 +32616,8 @@ class SectionEditorComponent {
                   }
                   <input matInput formControlName="icon" [placeholder]="tx('dynamicForm.sectionEditor.header.placeholders.baseIcon', 'e.g. info, settings, person')" />
                   <button
-                    mat-icon-button
+                    praxisIconButton="search"
+                    size="dense"
                     matSuffix
                     type="button"
                     (click)="pickIcon()"
@@ -32658,11 +32625,11 @@ class SectionEditorComponent {
                     [attr.aria-label]="tx('dynamicForm.sectionEditor.header.actions.pickIcon', 'Pick icon')"
                     data-testid="pick-icon"
                     >
-                    <mat-icon [praxisIcon]="'search'"></mat-icon>
                   </button>
                   @if (form.value.icon) {
                     <button
-                      mat-icon-button
+                      praxisIconButton="backspace"
+                      size="dense"
                       matSuffix
                       type="button"
                       (click)="clearIcon()"
@@ -32670,17 +32637,16 @@ class SectionEditorComponent {
                       [attr.aria-label]="tx('dynamicForm.sectionEditor.header.actions.clearIcon', 'Clear icon')"
                       data-testid="clear-icon"
                       >
-                      <mat-icon [praxisIcon]="'backspace'"></mat-icon>
                     </button>
                   }
                   <button
-                    mat-icon-button
+                    praxisIconButton="help_outline"
+                    size="dense"
                     matSuffix
                     type="button"
                     class="help-icon-button"
                     [matTooltip]="tx('dynamicForm.sectionEditor.header.actions.iconHelp', 'Material Icons (ligatures)')"
                     >
-                    <mat-icon>help_outline</mat-icon>
                   </button>
                 </mat-form-field>
               </div>
@@ -32806,31 +32772,31 @@ class SectionEditorComponent {
                       </div>
                       <div class="header-action-toolbar-buttons">
                         <button
-                          mat-icon-button
+                          praxisIconButton="arrow_upward"
+                          size="compact"
                           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
+                          praxisIconButton="arrow_downward"
+                          size="compact"
                           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
+                          praxisIconButton="delete"
+                          size="compact"
                           type="button"
-                          color="warn"
+                          class="danger-action"
                           (click)="removeHeaderAction(index)"
                           [attr.aria-label]="tx('headerActions.remove', 'Remover ação')"
                           >
-                          <mat-icon [praxisIcon]="'delete'"></mat-icon>
                         </button>
                       </div>
                     </div>
@@ -32860,35 +32826,35 @@ class SectionEditorComponent {
                         }
                         <input matInput formControlName="icon" [placeholder]="tx('headerActions.placeholders.icon', 'ex.: help_outline')" />
                         <button
-                          mat-icon-button
+                          praxisIconButton="search"
+                          size="dense"
                           matSuffix
                           type="button"
                           (click)="pickHeaderActionIcon(index)"
                           [matTooltip]="tx('headerActions.actions.pickIcon', 'Escolher ícone da ação')"
                           [attr.aria-label]="tx('headerActions.actions.pickIcon', 'Escolher ícone da ação')"
                           >
-                          <mat-icon [praxisIcon]="'search'"></mat-icon>
                         </button>
                         @if (actionGroup.get('icon')?.value) {
                           <button
-                            mat-icon-button
+                            praxisIconButton="backspace"
+                            size="dense"
                             matSuffix
                             type="button"
                             (click)="clearHeaderActionIcon(index)"
                             [matTooltip]="tx('headerActions.actions.clearIcon', 'Limpar ícone da ação')"
                             [attr.aria-label]="tx('headerActions.actions.clearIcon', 'Limpar ícone da ação')"
                             >
-                            <mat-icon [praxisIcon]="'backspace'"></mat-icon>
                           </button>
                         }
                         <button
-                          mat-icon-button
+                          praxisIconButton="help_outline"
+                          size="dense"
                           matSuffix
                           type="button"
                           class="help-icon-button"
                           [matTooltip]="tx('headerActions.actions.iconHelp', 'Use Material Symbols ou ícones Praxis já registrados no host.')"
                           >
-                          <mat-icon>help_outline</mat-icon>
                         </button>
                       </mat-form-field>
                     </div>
@@ -32918,13 +32884,13 @@ class SectionEditorComponent {
                           </mat-optgroup>
                         </mat-select>
                         <button
-                          mat-icon-button
+                          praxisIconButton="help_outline"
+                          size="dense"
                           matSuffix
                           type="button"
                           class="help-icon-button"
                           [matTooltip]="tx('headerActions.help.actionResolver', 'Ações globais exigem executor no app (ActionResolver). Customizadas só emitem evento neste output.')"
                           >
-                          <mat-icon>help_outline</mat-icon>
                         </button>
                       </mat-form-field>
                       @if (getHeaderActionSelectValue(actionGroup.get('action')?.value, actionGroup.get('globalAction')?.value) === customActionValue) {
@@ -33033,12 +32999,12 @@ class SectionEditorComponent {
                         <div class="header-action-preview-body">
                           <button
                             type="button"
-                            mat-icon-button
+                            [praxisIconButton]="actionGroup.get('icon')?.value || 'help_outline'"
+                            size="compact"
                             class="header-action-preview-button"
                             [ngStyle]="getHeaderActionPreviewStyles(index)"
                             [attr.aria-label]="actionGroup.get('label')?.value || tx('headerActions.preview.defaultLabel', 'Prévia da ação')"
                             >
-                            <mat-icon [praxisIcon]="actionGroup.get('icon')?.value || 'help_outline'"></mat-icon>
                           </button>
                           <div class="header-action-preview-meta">
                             <div class="header-action-preview-label">
@@ -33190,7 +33156,8 @@ class SectionEditorComponent {
                       }
                       <input matInput formControlName="fallbackIcon" [placeholder]="tx('dynamicForm.sectionEditor.header.fallbackIcon.placeholder', 'ex.: person')" />
                       <button
-                        mat-icon-button
+                        praxisIconButton="search"
+                        size="dense"
                         matSuffix
                         type="button"
                         (click)="pickFallbackIcon()"
@@ -33198,11 +33165,11 @@ class SectionEditorComponent {
                         [attr.aria-label]="tx('dynamicForm.sectionEditor.header.fallbackIcon.pick', 'Escolher icone de fallback')"
                         data-testid="pick-fallback-icon"
                         >
-                        <mat-icon [praxisIcon]="'search'"></mat-icon>
                       </button>
                       @if (form.get('sectionHeader.fallbackIcon')?.value) {
                         <button
-                          mat-icon-button
+                          praxisIconButton="backspace"
+                          size="dense"
                           matSuffix
                           type="button"
                           (click)="clearFallbackIcon()"
@@ -33210,7 +33177,6 @@ class SectionEditorComponent {
                           [attr.aria-label]="tx('dynamicForm.sectionEditor.header.fallbackIcon.clear', 'Limpar icone de fallback')"
                           data-testid="clear-fallback-icon"
                           >
-                          <mat-icon [praxisIcon]="'backspace'"></mat-icon>
                         </button>
                       }
                     </mat-form-field>
@@ -33247,7 +33213,7 @@ class SectionEditorComponent {
         </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}.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-section{display:flex;flex-direction:column;gap:4px}.header-action-section-title{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.header-action-section-description{margin:0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-section-description.advanced{margin:0 0 10px}.header-action-callout{border-radius:10px;padding:10px 12px;background:color-mix(in srgb,var(--md-sys-color-primary) 8%,white);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}.header-action-callout-title{font-size:12px;font-weight:700;margin:0 0 4px;color:var(--md-sys-color-on-surface)}.header-action-callout-text{margin:0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-preview{border-radius:10px;padding:10px 12px;background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);margin-bottom:12px}.header-action-preview-title{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant)}.header-action-preview-body{display:flex;align-items:center;gap:12px}.header-action-preview-button{border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container)}.header-action-preview-meta{display:flex;flex-direction:column;gap:4px}.header-action-preview-label{font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface)}.header-action-preview-caption{font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-style-presets{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.header-action-style-presets-title{font-size:12px;font-weight:700;color:var(--md-sys-color-on-surface-variant)}.header-action-style-presets-buttons{display:flex;flex-wrap:wrap;gap:8px}.header-action-advanced{border-top:1px dashed var(--md-sys-color-outline-variant);padding-top:12px}.header-action-advanced summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface);list-style:none}.header-action-advanced summary::-webkit-details-marker{display:none}.header-action-advanced summary:before{content:\"\\25b8\";display:inline-block;margin-right:8px;color:var(--md-sys-color-on-surface-variant)}.header-action-advanced[open] summary:before{content:\"\\25be\"}.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-1{display:grid;gap:10px}.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$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i6$3.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.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: i5$2.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: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: i5.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: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }] });
+    `, 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-section{display:flex;flex-direction:column;gap:4px}.header-action-section-title{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.header-action-section-description{margin:0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-section-description.advanced{margin:0 0 10px}.header-action-callout{border-radius:10px;padding:10px 12px;background:color-mix(in srgb,var(--md-sys-color-primary) 8%,white);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}.header-action-callout-title{font-size:12px;font-weight:700;margin:0 0 4px;color:var(--md-sys-color-on-surface)}.header-action-callout-text{margin:0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-preview{border-radius:10px;padding:10px 12px;background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);margin-bottom:12px}.header-action-preview-title{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant)}.header-action-preview-body{display:flex;align-items:center;gap:12px}.header-action-preview-button{border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container)}.header-action-preview-meta{display:flex;flex-direction:column;gap:4px}.header-action-preview-label{font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface)}.header-action-preview-caption{font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-style-presets{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.header-action-style-presets-title{font-size:12px;font-weight:700;color:var(--md-sys-color-on-surface-variant)}.header-action-style-presets-buttons{display:flex;flex-wrap:wrap;gap:8px}.header-action-advanced{border-top:1px dashed var(--md-sys-color-outline-variant);padding-top:12px}.header-action-advanced summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface);list-style:none}.header-action-advanced summary::-webkit-details-marker{display:none}.header-action-advanced summary:before{content:\"\\25b8\";display:inline-block;margin-right:8px;color:var(--md-sys-color-on-surface-variant)}.header-action-advanced[open] summary:before{content:\"\\25be\"}.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-1{display:grid;gap:10px}.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}.danger-action{color:var(--md-sys-color-error)}.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$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i6$3.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.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: i5$2.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: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SectionEditorComponent, decorators: [{
             type: Component,
@@ -33264,6 +33230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSlideToggleModule,
                         MatButtonModule,
                         MatIconModule,
+                        PraxisIconButtonComponent,
                         PraxisIconDirective,
                         MatTooltipModule,
                         MatButtonToggleModule,
@@ -33300,7 +33267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   }
                   <input matInput formControlName="icon" [placeholder]="tx('dynamicForm.sectionEditor.header.placeholders.baseIcon', 'e.g. info, settings, person')" />
                   <button
-                    mat-icon-button
+                    praxisIconButton="search"
+                    size="dense"
                     matSuffix
                     type="button"
                     (click)="pickIcon()"
@@ -33308,11 +33276,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     [attr.aria-label]="tx('dynamicForm.sectionEditor.header.actions.pickIcon', 'Pick icon')"
                     data-testid="pick-icon"
                     >
-                    <mat-icon [praxisIcon]="'search'"></mat-icon>
                   </button>
                   @if (form.value.icon) {
                     <button
-                      mat-icon-button
+                      praxisIconButton="backspace"
+                      size="dense"
                       matSuffix
                       type="button"
                       (click)="clearIcon()"
@@ -33320,17 +33288,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       [attr.aria-label]="tx('dynamicForm.sectionEditor.header.actions.clearIcon', 'Clear icon')"
                       data-testid="clear-icon"
                       >
-                      <mat-icon [praxisIcon]="'backspace'"></mat-icon>
                     </button>
                   }
                   <button
-                    mat-icon-button
+                    praxisIconButton="help_outline"
+                    size="dense"
                     matSuffix
                     type="button"
                     class="help-icon-button"
                     [matTooltip]="tx('dynamicForm.sectionEditor.header.actions.iconHelp', 'Material Icons (ligatures)')"
                     >
-                    <mat-icon>help_outline</mat-icon>
                   </button>
                 </mat-form-field>
               </div>
@@ -33456,31 +33423,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       </div>
                       <div class="header-action-toolbar-buttons">
                         <button
-                          mat-icon-button
+                          praxisIconButton="arrow_upward"
+                          size="compact"
                           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
+                          praxisIconButton="arrow_downward"
+                          size="compact"
                           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
+                          praxisIconButton="delete"
+                          size="compact"
                           type="button"
-                          color="warn"
+                          class="danger-action"
                           (click)="removeHeaderAction(index)"
                           [attr.aria-label]="tx('headerActions.remove', 'Remover ação')"
                           >
-                          <mat-icon [praxisIcon]="'delete'"></mat-icon>
                         </button>
                       </div>
                     </div>
@@ -33510,35 +33477,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         }
                         <input matInput formControlName="icon" [placeholder]="tx('headerActions.placeholders.icon', 'ex.: help_outline')" />
                         <button
-                          mat-icon-button
+                          praxisIconButton="search"
+                          size="dense"
                           matSuffix
                           type="button"
                           (click)="pickHeaderActionIcon(index)"
                           [matTooltip]="tx('headerActions.actions.pickIcon', 'Escolher ícone da ação')"
                           [attr.aria-label]="tx('headerActions.actions.pickIcon', 'Escolher ícone da ação')"
                           >
-                          <mat-icon [praxisIcon]="'search'"></mat-icon>
                         </button>
                         @if (actionGroup.get('icon')?.value) {
                           <button
-                            mat-icon-button
+                            praxisIconButton="backspace"
+                            size="dense"
                             matSuffix
                             type="button"
                             (click)="clearHeaderActionIcon(index)"
                             [matTooltip]="tx('headerActions.actions.clearIcon', 'Limpar ícone da ação')"
                             [attr.aria-label]="tx('headerActions.actions.clearIcon', 'Limpar ícone da ação')"
                             >
-                            <mat-icon [praxisIcon]="'backspace'"></mat-icon>
                           </button>
                         }
                         <button
-                          mat-icon-button
+                          praxisIconButton="help_outline"
+                          size="dense"
                           matSuffix
                           type="button"
                           class="help-icon-button"
                           [matTooltip]="tx('headerActions.actions.iconHelp', 'Use Material Symbols ou ícones Praxis já registrados no host.')"
                           >
-                          <mat-icon>help_outline</mat-icon>
                         </button>
                       </mat-form-field>
                     </div>
@@ -33568,13 +33535,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           </mat-optgroup>
                         </mat-select>
                         <button
-                          mat-icon-button
+                          praxisIconButton="help_outline"
+                          size="dense"
                           matSuffix
                           type="button"
                           class="help-icon-button"
                           [matTooltip]="tx('headerActions.help.actionResolver', 'Ações globais exigem executor no app (ActionResolver). Customizadas só emitem evento neste output.')"
                           >
-                          <mat-icon>help_outline</mat-icon>
                         </button>
                       </mat-form-field>
                       @if (getHeaderActionSelectValue(actionGroup.get('action')?.value, actionGroup.get('globalAction')?.value) === customActionValue) {
@@ -33683,12 +33650,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         <div class="header-action-preview-body">
                           <button
                             type="button"
-                            mat-icon-button
+                            [praxisIconButton]="actionGroup.get('icon')?.value || 'help_outline'"
+                            size="compact"
                             class="header-action-preview-button"
                             [ngStyle]="getHeaderActionPreviewStyles(index)"
                             [attr.aria-label]="actionGroup.get('label')?.value || tx('headerActions.preview.defaultLabel', 'Prévia da ação')"
                             >
-                            <mat-icon [praxisIcon]="actionGroup.get('icon')?.value || 'help_outline'"></mat-icon>
                           </button>
                           <div class="header-action-preview-meta">
                             <div class="header-action-preview-label">
@@ -33840,7 +33807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       }
                       <input matInput formControlName="fallbackIcon" [placeholder]="tx('dynamicForm.sectionEditor.header.fallbackIcon.placeholder', 'ex.: person')" />
                       <button
-                        mat-icon-button
+                        praxisIconButton="search"
+                        size="dense"
                         matSuffix
                         type="button"
                         (click)="pickFallbackIcon()"
@@ -33848,11 +33816,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         [attr.aria-label]="tx('dynamicForm.sectionEditor.header.fallbackIcon.pick', 'Escolher icone de fallback')"
                         data-testid="pick-fallback-icon"
                         >
-                        <mat-icon [praxisIcon]="'search'"></mat-icon>
                       </button>
                       @if (form.get('sectionHeader.fallbackIcon')?.value) {
                         <button
-                          mat-icon-button
+                          praxisIconButton="backspace"
+                          size="dense"
                           matSuffix
                           type="button"
                           (click)="clearFallbackIcon()"
@@ -33860,7 +33828,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           [attr.aria-label]="tx('dynamicForm.sectionEditor.header.fallbackIcon.clear', 'Limpar icone de fallback')"
                           data-testid="clear-fallback-icon"
                           >
-                          <mat-icon [praxisIcon]="'backspace'"></mat-icon>
                         </button>
                       }
                     </mat-form-field>
@@ -33897,7 +33864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </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}.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-section{display:flex;flex-direction:column;gap:4px}.header-action-section-title{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.header-action-section-description{margin:0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-section-description.advanced{margin:0 0 10px}.header-action-callout{border-radius:10px;padding:10px 12px;background:color-mix(in srgb,var(--md-sys-color-primary) 8%,white);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}.header-action-callout-title{font-size:12px;font-weight:700;margin:0 0 4px;color:var(--md-sys-color-on-surface)}.header-action-callout-text{margin:0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-preview{border-radius:10px;padding:10px 12px;background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);margin-bottom:12px}.header-action-preview-title{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant)}.header-action-preview-body{display:flex;align-items:center;gap:12px}.header-action-preview-button{border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container)}.header-action-preview-meta{display:flex;flex-direction:column;gap:4px}.header-action-preview-label{font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface)}.header-action-preview-caption{font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-style-presets{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.header-action-style-presets-title{font-size:12px;font-weight:700;color:var(--md-sys-color-on-surface-variant)}.header-action-style-presets-buttons{display:flex;flex-wrap:wrap;gap:8px}.header-action-advanced{border-top:1px dashed var(--md-sys-color-outline-variant);padding-top:12px}.header-action-advanced summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface);list-style:none}.header-action-advanced summary::-webkit-details-marker{display:none}.header-action-advanced summary:before{content:\"\\25b8\";display:inline-block;margin-right:8px;color:var(--md-sys-color-on-surface-variant)}.header-action-advanced[open] summary:before{content:\"\\25be\"}.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-1{display:grid;gap:10px}.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-section{display:flex;flex-direction:column;gap:4px}.header-action-section-title{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant)}.header-action-section-description{margin:0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-section-description.advanced{margin:0 0 10px}.header-action-callout{border-radius:10px;padding:10px 12px;background:color-mix(in srgb,var(--md-sys-color-primary) 8%,white);border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}.header-action-callout-title{font-size:12px;font-weight:700;margin:0 0 4px;color:var(--md-sys-color-on-surface)}.header-action-callout-text{margin:0;font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-preview{border-radius:10px;padding:10px 12px;background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);margin-bottom:12px}.header-action-preview-title{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant)}.header-action-preview-body{display:flex;align-items:center;gap:12px}.header-action-preview-button{border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container)}.header-action-preview-meta{display:flex;flex-direction:column;gap:4px}.header-action-preview-label{font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface)}.header-action-preview-caption{font-size:12px;line-height:1.5;color:var(--md-sys-color-on-surface-variant)}.header-action-style-presets{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.header-action-style-presets-title{font-size:12px;font-weight:700;color:var(--md-sys-color-on-surface-variant)}.header-action-style-presets-buttons{display:flex;flex-wrap:wrap;gap:8px}.header-action-advanced{border-top:1px dashed var(--md-sys-color-outline-variant);padding-top:12px}.header-action-advanced summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface);list-style:none}.header-action-advanced summary::-webkit-details-marker{display:none}.header-action-advanced summary:before{content:\"\\25b8\";display:inline-block;margin-right:8px;color:var(--md-sys-color-on-surface-variant)}.header-action-advanced[open] summary:before{content:\"\\25be\"}.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-1{display:grid;gap:10px}.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}.danger-action{color:var(--md-sys-color-error)}.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]
@@ -34604,29 +34571,29 @@ class ColumnEditorComponent {
                 <div class="control-block">
                   <mat-form-field appearance="fill">
                     <mat-label>{{ tx('dynamicForm.columnEditor.layout.fields.span', 'Span ({{bp}})', { bp: previewBreakpoint }) }}</mat-label>
-                    <button mat-icon-button matPrefix type="button" (click)="adjustSpan(-1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.reduceSpan', 'Reduzir span')"><mat-icon>remove</mat-icon></button>
+                    <button praxisIconButton="remove" size="dense" matPrefix type="button" (click)="adjustSpan(-1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.reduceSpan', 'Reduzir span')"></button>
                     <input matInput type="number" [value]="getSpan(previewBreakpoint)" (input)="setSpan(($any($event.target)).value)" min="1" max="12" />
-                    <button mat-icon-button matSuffix type="button" (click)="adjustSpan(1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.increaseSpan', 'Aumentar span')"><mat-icon>add</mat-icon></button>
+                    <button praxisIconButton="add" size="dense" matSuffix type="button" (click)="adjustSpan(1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.increaseSpan', 'Aumentar span')"></button>
                   </mat-form-field>
                   <div class="control-help">
                     <span class="control-help__label">{{ tx('config.common.understand', 'Entenda:') }}</span>
                     <button
-                      mat-icon-button
+                      praxisIconButton="help_outline"
+                      size="dense"
                       class="help-icon-button"
                       type="button"
                       [matTooltip]="tx('dynamicForm.columnEditor.layout.help.grid', 'Grade de 12 colunas; offset máximo ajusta automaticamente.')"
                       matTooltipPosition="above"
                       >
-                      <mat-icon>help_outline</mat-icon>
                     </button>
                   </div>
                 </div>
                 <div class="control-block">
                   <mat-form-field appearance="fill">
                     <mat-label>{{ tx('dynamicForm.columnEditor.layout.fields.offset', 'Offset ({{bp}})', { bp: previewBreakpoint }) }}</mat-label>
-                    <button mat-icon-button matPrefix type="button" (click)="adjustOffset(-1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.reduceOffset', 'Reduzir offset')"><mat-icon>chevron_left</mat-icon></button>
+                    <button praxisIconButton="chevron_left" size="dense" matPrefix type="button" (click)="adjustOffset(-1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.reduceOffset', 'Reduzir offset')"></button>
                     <input matInput type="number" [value]="getOffset(previewBreakpoint)" (input)="setOffset(($any($event.target)).value)" min="0" />
-                    <button mat-icon-button matSuffix type="button" (click)="adjustOffset(1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.increaseOffset', 'Aumentar offset')"><mat-icon>chevron_right</mat-icon></button>
+                    <button praxisIconButton="chevron_right" size="dense" matSuffix type="button" (click)="adjustOffset(1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.increaseOffset', 'Aumentar offset')"></button>
                   </mat-form-field>
                 </div>
                 <div class="control-block">
@@ -34709,7 +34676,7 @@ class ColumnEditorComponent {
         </mat-tab-group>
       </div>
     }
-    `, isInline: true, styles: [".editor-container{padding:16px}.header{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.state-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);font-size:12px}.layout-form{display:flex;flex-direction:column;gap:12px}mat-tab-group{margin-top:6px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.preset-group{display:flex;flex-wrap:wrap;gap:6px}.preset-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.bp-toggle{display:inline-flex;gap:4px}.bp-toggle__btn{min-width:34px;height:30px;line-height:30px;padding:0 8px;text-transform:uppercase}.bp-toggle__btn.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.span-summary,.offset-summary{background:var(--md-sys-color-surface-variant);padding:4px 8px;border-radius:8px;font-size:12px}.hidden-pill{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border:1px dashed var(--md-sys-color-error);padding:4px 8px;border-radius:8px;font-size:12px}.controls-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}.control-block{display:flex;flex-direction:column;gap:6px}.number-stepper{display:inline-flex;align-items:center;gap:4px}.number-stepper input{width:80px}.control-help{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.control-help__label{font-weight:500}.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}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.hidden-toggle{justify-content:center}.copy-row{display:flex;gap:8px;flex-wrap:wrap}mat-form-field{width:100%}.fields-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.field-chip{padding:4px 8px;border-radius:10px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);font-size:12px}.behavior-pane{display:flex;flex-direction:column;gap:12px}.visibility-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.style-form{display:grid;gap:12px}\n"], dependencies: [{ 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],[formArray],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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: MatSelectModule }, { kind: "component", type: i6$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$2.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: MatTabsModule }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.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: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    `, isInline: true, styles: [".editor-container{padding:16px}.header{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.state-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);font-size:12px}.layout-form{display:flex;flex-direction:column;gap:12px}mat-tab-group{margin-top:6px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.preset-group{display:flex;flex-wrap:wrap;gap:6px}.preset-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.bp-toggle{display:inline-flex;gap:4px}.bp-toggle__btn{min-width:34px;height:30px;line-height:30px;padding:0 8px;text-transform:uppercase}.bp-toggle__btn.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.span-summary,.offset-summary{background:var(--md-sys-color-surface-variant);padding:4px 8px;border-radius:8px;font-size:12px}.hidden-pill{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border:1px dashed var(--md-sys-color-error);padding:4px 8px;border-radius:8px;font-size:12px}.controls-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}.control-block{display:flex;flex-direction:column;gap:6px}.number-stepper{display:inline-flex;align-items:center;gap:4px}.number-stepper input{width:80px}.control-help{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.control-help__label{font-weight:500}.hidden-toggle{justify-content:center}.copy-row{display:flex;gap:8px;flex-wrap:wrap}mat-form-field{width:100%}.fields-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.field-chip{padding:4px 8px;border-radius:10px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);font-size:12px}.behavior-pane{display:flex;flex-direction:column;gap:12px}.visibility-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.style-form{display:grid;gap:12px}\n"], dependencies: [{ 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],[formArray],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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: MatSelectModule }, { kind: "component", type: i6$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$2.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: MatTabsModule }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.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: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ColumnEditorComponent, decorators: [{
             type: Component,
@@ -34722,7 +34689,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatTabsModule,
                         MatButtonModule,
                         MatTooltipModule,
-                        MatIconModule
+                        MatIconModule,
+                        PraxisIconButtonComponent,
                     ], template: `
     @if (form) {
       <div class="editor-container">
@@ -34801,29 +34769,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 <div class="control-block">
                   <mat-form-field appearance="fill">
                     <mat-label>{{ tx('dynamicForm.columnEditor.layout.fields.span', 'Span ({{bp}})', { bp: previewBreakpoint }) }}</mat-label>
-                    <button mat-icon-button matPrefix type="button" (click)="adjustSpan(-1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.reduceSpan', 'Reduzir span')"><mat-icon>remove</mat-icon></button>
+                    <button praxisIconButton="remove" size="dense" matPrefix type="button" (click)="adjustSpan(-1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.reduceSpan', 'Reduzir span')"></button>
                     <input matInput type="number" [value]="getSpan(previewBreakpoint)" (input)="setSpan(($any($event.target)).value)" min="1" max="12" />
-                    <button mat-icon-button matSuffix type="button" (click)="adjustSpan(1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.increaseSpan', 'Aumentar span')"><mat-icon>add</mat-icon></button>
+                    <button praxisIconButton="add" size="dense" matSuffix type="button" (click)="adjustSpan(1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.increaseSpan', 'Aumentar span')"></button>
                   </mat-form-field>
                   <div class="control-help">
                     <span class="control-help__label">{{ tx('config.common.understand', 'Entenda:') }}</span>
                     <button
-                      mat-icon-button
+                      praxisIconButton="help_outline"
+                      size="dense"
                       class="help-icon-button"
                       type="button"
                       [matTooltip]="tx('dynamicForm.columnEditor.layout.help.grid', 'Grade de 12 colunas; offset máximo ajusta automaticamente.')"
                       matTooltipPosition="above"
                       >
-                      <mat-icon>help_outline</mat-icon>
                     </button>
                   </div>
                 </div>
                 <div class="control-block">
                   <mat-form-field appearance="fill">
                     <mat-label>{{ tx('dynamicForm.columnEditor.layout.fields.offset', 'Offset ({{bp}})', { bp: previewBreakpoint }) }}</mat-label>
-                    <button mat-icon-button matPrefix type="button" (click)="adjustOffset(-1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.reduceOffset', 'Reduzir offset')"><mat-icon>chevron_left</mat-icon></button>
+                    <button praxisIconButton="chevron_left" size="dense" matPrefix type="button" (click)="adjustOffset(-1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.reduceOffset', 'Reduzir offset')"></button>
                     <input matInput type="number" [value]="getOffset(previewBreakpoint)" (input)="setOffset(($any($event.target)).value)" min="0" />
-                    <button mat-icon-button matSuffix type="button" (click)="adjustOffset(1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.increaseOffset', 'Aumentar offset')"><mat-icon>chevron_right</mat-icon></button>
+                    <button praxisIconButton="chevron_right" size="dense" matSuffix type="button" (click)="adjustOffset(1)" [matTooltip]="tx('dynamicForm.columnEditor.layout.actions.increaseOffset', 'Aumentar offset')"></button>
                   </mat-form-field>
                 </div>
                 <div class="control-block">
@@ -34906,7 +34874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </mat-tab-group>
       </div>
     }
-    `, styles: [".editor-container{padding:16px}.header{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.state-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);font-size:12px}.layout-form{display:flex;flex-direction:column;gap:12px}mat-tab-group{margin-top:6px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.preset-group{display:flex;flex-wrap:wrap;gap:6px}.preset-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.bp-toggle{display:inline-flex;gap:4px}.bp-toggle__btn{min-width:34px;height:30px;line-height:30px;padding:0 8px;text-transform:uppercase}.bp-toggle__btn.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.span-summary,.offset-summary{background:var(--md-sys-color-surface-variant);padding:4px 8px;border-radius:8px;font-size:12px}.hidden-pill{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border:1px dashed var(--md-sys-color-error);padding:4px 8px;border-radius:8px;font-size:12px}.controls-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}.control-block{display:flex;flex-direction:column;gap:6px}.number-stepper{display:inline-flex;align-items:center;gap:4px}.number-stepper input{width:80px}.control-help{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.control-help__label{font-weight:500}.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}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.hidden-toggle{justify-content:center}.copy-row{display:flex;gap:8px;flex-wrap:wrap}mat-form-field{width:100%}.fields-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.field-chip{padding:4px 8px;border-radius:10px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);font-size:12px}.behavior-pane{display:flex;flex-direction:column;gap:12px}.visibility-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.style-form{display:grid;gap:12px}\n"] }]
+    `, styles: [".editor-container{padding:16px}.header{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.state-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);font-size:12px}.layout-form{display:flex;flex-direction:column;gap:12px}mat-tab-group{margin-top:6px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.preset-group{display:flex;flex-wrap:wrap;gap:6px}.preset-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar-title{font-weight:600;color:var(--md-sys-color-on-surface-variant)}.bp-toggle{display:inline-flex;gap:4px}.bp-toggle__btn{min-width:34px;height:30px;line-height:30px;padding:0 8px;text-transform:uppercase}.bp-toggle__btn.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.span-summary,.offset-summary{background:var(--md-sys-color-surface-variant);padding:4px 8px;border-radius:8px;font-size:12px}.hidden-pill{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border:1px dashed var(--md-sys-color-error);padding:4px 8px;border-radius:8px;font-size:12px}.controls-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}.control-block{display:flex;flex-direction:column;gap:6px}.number-stepper{display:inline-flex;align-items:center;gap:4px}.number-stepper input{width:80px}.control-help{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.control-help__label{font-weight:500}.hidden-toggle{justify-content:center}.copy-row{display:flex;gap:8px;flex-wrap:wrap}mat-form-field{width:100%}.fields-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.field-chip{padding:4px 8px;border-radius:10px;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);font-size:12px}.behavior-pane{display:flex;flex-direction:column;gap:12px}.visibility-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.style-form{display:grid;gap:12px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]