@praxisui/settings-panel 9.0.66 → 9.0.68-rc.0

package/fesm2022/praxisui-settings-panel.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, ViewContainerRef, HostListener, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Injector, Injectable, ElementRef, ChangeDetectorRef, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { inject, Renderer2, DestroyRef, ViewContainerRef, HostListener, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Injector, Injectable, ElementRef, ChangeDetectorRef, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule, NgStyle, NgClass } from '@angular/common';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { InteractivityChecker, CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/dialog';
@@ -15,7 +15,7 @@ import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { isObservable, firstValueFrom, of, from, Subject, ReplaySubject, take, BehaviorSubject } from 'rxjs';
+import { isObservable, firstValueFrom, of, from, Subject, ReplaySubject, take, takeUntil, BehaviorSubject } from 'rxjs';
 import * as i1$2 from '@praxisui/core';
 import { providePraxisI18n, PraxisI18nService, PraxisIconButtonComponent, PraxisIconDirective, SETTINGS_PANEL_DATA as SETTINGS_PANEL_DATA$1, PraxisLayerScaleStyleService, SETTINGS_PANEL_BRIDGE, SURFACE_DRAWER_BRIDGE, SURFACE_DRAWER_CONTENT_DATA, SURFACE_DRAWER_REF, GlobalConfigService, FieldControlType, IconPickerService, LoggerService, ComponentMetadataRegistry } from '@praxisui/core';
 import { ConfirmDialogComponent } from '@praxisui/dynamic-fields';
@@ -421,6 +421,11 @@ const PRAXIS_SETTINGS_PANEL_GLOBAL_CONFIG_EDITOR_EN_US = {
 };
 
 const PRAXIS_SETTINGS_PANEL_EN_US = {
+    'View result': 'View result',
+    'Page preview': 'Page preview',
+    'Inspect the result. Return to keep editing; nothing is saved here.': 'Inspect the result. Return to keep editing; nothing is saved here.',
+    'Back to settings': 'Back to settings',
+    'Changes applied. Save and close to finish.': 'Changes applied. Save and close to finish.',
     'Operation in progress...': 'Operation in progress...',
     'The configuration contains errors that need to be fixed.': 'The configuration contains errors that need to be fixed.',
     'No changes to apply or save.': 'No changes to apply or save.',
@@ -448,6 +453,11 @@ const PRAXIS_SETTINGS_PANEL_EN_US = {
 };
 
 const PRAXIS_SETTINGS_PANEL_PT_BR = {
+    'View result': 'Ver resultado',
+    'Page preview': 'Prévia da página',
+    'Inspect the result. Return to keep editing; nothing is saved here.': 'Confira o resultado. Volte para continuar editando; nada é salvo aqui.',
+    'Back to settings': 'Voltar às configurações',
+    'Changes applied. Save and close to finish.': 'Alterações aplicadas. Use Salvar e fechar para concluir.',
     'Operation in progress...': 'Operação em andamento...',
     'The configuration contains errors that need to be fixed.': 'A configuração contém erros que precisam ser corrigidos.',
     'No changes to apply or save.': 'Nenhuma alteração para aplicar ou salvar.',
@@ -495,15 +505,12 @@ function providePraxisSettingsPanelI18n() {
 
 function shouldDeferEscapeToActiveOverlay(overlayContainerElement, ownerElement) {
     const panes = Array.from(overlayContainerElement.querySelectorAll('.cdk-overlay-pane'));
-    return panes.some((pane) => {
-        if (!isActiveOverlayPane(pane)) {
-            return false;
-        }
-        if (ownerElement && paneContainsOrMatches(pane, ownerElement)) {
-            return false;
-        }
-        return true;
-    });
+    // CDK stacking follows pane order. A launching menu can still be attached
+    // below the newly opened editor; only overlays above this owner take priority.
+    const ownerIndex = ownerElement
+        ? panes.findIndex((pane) => paneContainsOrMatches(pane, ownerElement))
+        : -1;
+    return panes.slice(ownerIndex + 1).some(isActiveOverlayPane);
 }
 function isActiveOverlayPane(pane) {
     const contentElement = pane.firstElementChild;
@@ -556,6 +563,15 @@ class SettingsPanelComponent {
     persistSizeKey;
     expanded = false;
     interactionActive = true;
+    previewTarget;
+    previewing = false;
+    previewElement = null;
+    previewScroll = [];
+    previewFocus = null;
+    renderer = inject(Renderer2);
+    suspendedFocus = null;
+    interactivityChecker = inject(InteractivityChecker);
+    focusTrap;
     ref;
     contentRef;
     static nextId = 0;
@@ -567,6 +583,7 @@ class SettingsPanelComponent {
         ...DEFAULT_DIAGNOSTICS,
     };
     lastSavedAt = null;
+    hasAppliedChanges = false;
     activePointerId = null;
     dragStartX = 0;
     dragStartWidth = 0;
@@ -581,9 +598,51 @@ class SettingsPanelComponent {
         this.dialog = dialog;
         this.elementRef = elementRef;
         this.overlayContainer = overlayContainer;
+        this.destroyRef.onDestroy(() => this.restorePreviewPage());
+    }
+    get canInspectPreview() {
+        return !!this.previewTarget && this.interactionActive && this.isValid && !this.isBusy;
+    }
+    showPreview() {
+        if (!this.canInspectPreview)
+            return;
+        const target = this.previewTarget?.();
+        if (!target?.isConnected)
+            return;
+        this.previewFocus = this.elementRef.nativeElement.ownerDocument.activeElement;
+        this.previewElement = target;
+        for (let element = target.parentElement; element; element = element.parentElement) {
+            this.previewScroll.push({ element, top: element.scrollTop, left: element.scrollLeft });
+        }
+        this.previewing = true;
+        this.ref.setPreviewing(true);
+        target.classList.add('praxis-settings-preview-target');
+        target.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
+        this.cdr.detectChanges();
+        this.elementRef.nativeElement.querySelector('[data-testid="settings-panel-return"]')?.focus({ preventScroll: true });
+    }
+    returnFromPreview() {
+        if (!this.previewing)
+            return;
+        this.previewing = false;
+        this.ref.setPreviewing(false);
+        this.restorePreviewPage();
+        this.cdr.detectChanges();
+        if (this.previewFocus?.isConnected)
+            this.previewFocus.focus({ preventScroll: true });
+        this.previewFocus = null;
+    }
+    restorePreviewPage() {
+        this.previewElement?.classList.remove('praxis-settings-preview-target');
+        this.previewElement = null;
+        for (const { element, top, left } of this.previewScroll) {
+            element.scrollTop = top;
+            element.scrollLeft = left;
+        }
+        this.previewScroll = [];
     }
     get canApply() {
-        return this.interactionActive && this.isDirty && this.isValid && !this.isBusy;
+        return !this.previewing && this.interactionActive && this.isDirty && this.isValid && !this.isBusy;
     }
     get panelInlineStyles() {
         return {
@@ -599,11 +658,41 @@ class SettingsPanelComponent {
         return this.tx('Resize panel');
     }
     get canSave() {
-        return this.interactionActive && this.isDirty && this.isValid && !this.isBusy;
+        return !this.previewing && this.interactionActive && (this.isDirty || this.hasAppliedChanges) && this.isValid && !this.isBusy;
     }
     setInteractionActive(active) {
+        if (active === this.interactionActive)
+            return;
+        const host = this.elementRef.nativeElement;
+        if (!active) {
+            this.returnFromPreview();
+            const focused = host.ownerDocument.activeElement;
+            this.suspendedFocus = focused instanceof HTMLElement && host.contains(focused) ? focused : null;
+        }
         this.interactionActive = active;
+        // Portal host bindings may update later than its view. Overlay arbitration and
+        // focus restoration must observe suspension synchronously on the host too.
+        if (active) {
+            this.renderer.removeAttribute(host, 'aria-hidden');
+            this.renderer.removeAttribute(host, 'inert');
+        }
+        else {
+            this.renderer.setAttribute(host, 'aria-hidden', 'true');
+            this.renderer.setAttribute(host, 'inert', '');
+        }
         this.cdr.detectChanges();
+        if (active) {
+            const target = this.suspendedFocus;
+            this.suspendedFocus = null;
+            if (target?.isConnected && host.contains(target)
+                && !target.closest('[inert], [aria-hidden="true"]')
+                && this.interactivityChecker.isFocusable(target)) {
+                target.focus({ preventScroll: true });
+            }
+            else {
+                this.focusTrap?.focusTrap.focusInitialElement();
+            }
+        }
     }
     get disabledReason() {
         if (this.isBusy) {
@@ -633,11 +722,16 @@ class SettingsPanelComponent {
             return 'invalid';
         if (this.isDirty)
             return 'dirty';
+        if (this.hasAppliedChanges)
+            return 'applied';
         if (this.lastSavedAt)
             return 'saved';
         return 'idle';
     }
     get statusMessage() {
+        if (this.statusTone === 'applied') {
+            return this.tx('Changes applied. Save and close to finish.');
+        }
         if (this.statusTone === 'busy') {
             return this.tx('Operation in progress...');
         }
@@ -763,6 +857,10 @@ class SettingsPanelComponent {
         if (value === undefined || !this.isValid || this.isBusy || !this.interactionActive)
             return;
         this.ref.apply(value);
+        // Applying can synchronously clear the editor's draft. Saving still needs
+        // to invoke the provider again, never replay a cached geometry request.
+        this.hasAppliedChanges = true;
+        this.cdr.markForCheck();
     }
     onSave() {
         if (!this.canSave)
@@ -791,6 +889,7 @@ class SettingsPanelComponent {
         if (value === undefined || !this.isValid || this.isBusy || !this.interactionActive || this.destroyRef.destroyed)
             return;
         this.lastSavedAt = Date.now();
+        this.hasAppliedChanges = false;
         this.isDirty = false;
         this.ref.save(value);
         this.cdr.markForCheck();
@@ -911,6 +1010,11 @@ class SettingsPanelComponent {
         });
     }
     requestClose(reason) {
+        if (this.previewing) {
+            this.returnFromPreview();
+            if (reason === 'esc' || reason === 'backdrop')
+                return of(false);
+        }
         return this.runBeforeCloseHook(reason).pipe(switchMap((allowed) => {
             if (!allowed) {
                 return of(false);
@@ -930,7 +1034,10 @@ class SettingsPanelComponent {
                 return;
             }
             event.preventDefault();
-            this.onCancel();
+            if (this.previewing)
+                this.returnFromPreview();
+            else
+                this.onCancel();
         }
         else if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
             event.preventDefault();
@@ -1020,7 +1127,9 @@ class SettingsPanelComponent {
         }
         const dialogData = {
             title: this.tx('Discard unsaved draft'),
-            message: this.tx('Discard the unsaved draft? Changes already applied to the preview will remain; this does not undo Apply.'),
+            message: this.tx(this.hasAppliedChanges
+                ? 'Discard the unsaved draft? Changes already applied to the preview will remain; this does not undo Apply.'
+                : 'You have unsaved changes. Are you sure you want to discard them?'),
             confirmText: this.tx('Discard draft'),
             cancelText: this.tx('Continue editing'),
             type: 'warning',
@@ -1031,7 +1140,7 @@ class SettingsPanelComponent {
             .afterClosed();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: i0.ElementRef }, { token: i1$1.OverlayContainer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SettingsPanelComponent, isStandalone: true, selector: "praxis-settings-panel", host: { listeners: { "document:keydown": "handleKeydown($event)", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerEnd($event)", "document:pointercancel": "onDocumentPointerEnd($event)" } }, providers: [providePraxisSettingsPanelI18n()], viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"settings-panel\"\n  data-testid=\"settings-panel-root\"\n  [class.expanded]=\"expanded\"\n  [class.is-resizable]=\"showResizeHandle\"\n  [ngStyle]=\"panelInlineStyles\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"interactionActive ? 'true' : null\"\n  [attr.aria-hidden]=\"interactionActive ? null : 'true'\"\n  [attr.inert]=\"interactionActive ? null : ''\"\n  [attr.aria-labelledby]=\"titleId\"\n  [cdkTrapFocus]=\"interactionActive\"\n  [cdkTrapFocusAutoCapture]=\"interactionActive\"\n  >\n  @if (showResizeHandle) {\n    <div\n      class=\"settings-panel__resize-handle\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-orientation=\"vertical\"\n      [attr.aria-label]=\"resizeHandleLabel\"\n      (pointerdown)=\"onResizeHandlePointerDown($event)\"\n      (keydown)=\"onResizeHandleKeydown($event)\"\n    ></div>\n  }\n  <header class=\"settings-panel-header\">\n    <h2 class=\"settings-panel-title\" [id]=\"titleId\">\n      @if (titleIcon) {\n        <mat-icon class=\"title-icon\" [praxisIcon]=\"titleIcon\"></mat-icon>\n      }\n      <span>{{ title }}</span>\n    </h2>\n    <span class=\"spacer\"></span>\n    <button\n      [praxisIconButton]=\"expanded ? 'close_fullscreen' : 'open_in_full'\"\n      size=\"compact\"\n      type=\"button\"\n      data-testid=\"settings-panel-toggle-expand\"\n      [attr.aria-label]=\"expanded ? tx('Collapse panel') : tx('Expand panel')\"\n      [attr.aria-expanded]=\"expanded\"\n      [matTooltip]=\"expanded ? tx('Collapse panel') : tx('Expand panel')\"\n      (click)=\"toggleExpand()\"\n    ></button>\n    <button\n      praxisIconButton=\"close\"\n      size=\"compact\"\n      type=\"button\"\n      data-testid=\"settings-panel-close-icon\"\n      [attr.aria-label]=\"tx('Close')\"\n      [matTooltip]=\"tx('Close')\"\n      (click)=\"onCancel()\"\n    ></button>\n  </header>\n  @if (showStatusMessage) {\n    <div\n      class=\"settings-panel-status\"\n      [attr.data-status]=\"statusTone\"\n      role=\"status\"\n      aria-live=\"polite\"\n      >\n      <mat-icon\n        aria-hidden=\"true\"\n        [praxisIcon]=\"\n          statusTone === 'dirty' || statusTone === 'invalid'\n            ? 'warning'\n            : statusTone === 'saved'\n              ? 'check_circle'\n              : statusTone === 'busy'\n                ? 'autorenew'\n                : 'info'\n        \"\n      ></mat-icon>\n      <span>{{ statusMessage }}</span>\n    </div>\n  }\n  <div class=\"settings-panel-body\">\n    <ng-template #contentHost></ng-template>\n  </div>\n  <footer class=\"settings-panel-footer\">\n    <button\n      mat-button\n      type=\"button\"\n      data-testid=\"settings-panel-reset\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onReset()\"\n      [disabled]=\"isBusy\"\n      >\n      <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'restart_alt'\"></mat-icon>\n      <span>{{ tx('Reset') }}</span>\n    </button>\n    <span class=\"spacer\"></span>\n    <button\n      mat-button\n      type=\"button\"\n      data-testid=\"settings-panel-cancel\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onCancel()\"\n      [disabled]=\"isBusy\"\n      >\n      <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'close'\"></mat-icon>\n      <span>{{ tx('Cancel') }}</span>\n    </button>\n    <button\n      mat-stroked-button\n      type=\"button\"\n      data-testid=\"settings-panel-apply\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onApply()\"\n      [disabled]=\"!canApply\"\n      [matTooltip]=\"applySaveDisabledReason\"\n      [matTooltipDisabled]=\"canApply || !diagnostics.showDisabledReason\"\n      [attr.aria-busy]=\"isBusy\"\n      [attr.aria-label]=\"applyActionLabel || 'Apply'\"\n      >\n      @if (showBusyIndicator) {\n        <mat-progress-spinner\n          mode=\"indeterminate\"\n          diameter=\"20\"\n        ></mat-progress-spinner>\n      }\n      @if (!showBusyIndicator) {\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'done'\"></mat-icon>\n        <span class=\"settings-panel-action-label settings-panel-action-label--apply\">{{ applyActionLabel }}</span>\n      }\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      type=\"button\"\n      data-testid=\"settings-panel-save\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onSave()\"\n      [disabled]=\"!canSave\"\n      [matTooltip]=\"applySaveDisabledReason\"\n      [matTooltipDisabled]=\"canSave || !diagnostics.showDisabledReason\"\n      [attr.aria-busy]=\"isBusy\"\n      [attr.aria-label]=\"saveActionLabel || 'Save & Close'\"\n      >\n      @if (showBusyIndicator) {\n        <mat-progress-spinner\n          mode=\"indeterminate\"\n          diameter=\"20\"\n        ></mat-progress-spinner>\n      }\n      @if (!showBusyIndicator) {\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'save'\"></mat-icon>\n        <span class=\"settings-panel-action-label settings-panel-action-label--save\">{{ saveActionLabel }}</span>\n      }\n    </button>\n  </footer>\n</div>\n", styles: ["@charset \"UTF-8\";praxis-settings-panel{display:block;height:100%;width:100%;min-width:0;flex:1 1 auto;box-sizing:border-box}praxis-settings-panel .settings-panel{position:relative;--pfx-settings-panel-surface-container: var( --md-sys-color-surface-container, #ffffff );--pfx-settings-panel-surface-container-high: var( --md-sys-color-surface-container-high, #f7f7f7 );--pfx-settings-panel-surface-container-low: var( --md-sys-color-surface-container-low, #f2f4f7 );--pfx-settings-panel-surface: var(--md-sys-color-surface, #ffffff);--pfx-settings-panel-on-surface: var(--md-sys-color-on-surface, #111827);--pfx-settings-panel-on-surface-variant: var( --md-sys-color-on-surface-variant, rgba(17, 24, 39, .72) );--pfx-settings-panel-outline: var( --md-sys-color-outline, rgba(15, 23, 42, .24) );--pfx-settings-panel-outline-variant: var( --md-sys-color-outline-variant, rgba(15, 23, 42, .12) );--pfx-settings-panel-primary: var(--md-sys-color-primary, #2563eb);--pfx-settings-panel-primary-container: var( --md-sys-color-primary-container, rgba(37, 99, 235, .14) );--pfx-settings-panel-on-primary-container: var( --md-sys-color-on-primary-container, #0f172a );--pfx-settings-panel-secondary: var( --md-sys-color-secondary, var(--pfx-settings-panel-primary) );--pfx-settings-panel-error: var(--md-sys-color-error, #b3261e);--pfx-settings-panel-error-container: var( --md-sys-color-error-container, rgba(179, 38, 30, .14) );display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:\"header\" \"status\" \"body\" \"footer\";height:100%;background:var(--pfx-settings-panel-surface-container);color:var(--pfx-settings-panel-on-surface);border-left:1px solid var(--pfx-settings-panel-outline-variant);width:100%;max-width:100%;min-width:0;box-sizing:border-box;box-shadow:var(--pfx-settings-panel-elevation, var(--md-sys-elevation-level2, 0 8px 24px rgba(0, 0, 0, .16)));overflow:hidden}praxis-settings-panel .settings-panel__resize-handle{position:absolute;inset:0 auto 0 0;width:12px;cursor:col-resize;touch-action:none;z-index:3;outline:none}praxis-settings-panel .settings-panel__resize-handle:before{content:\"\";position:absolute;inset:0 auto 0 4px;width:2px;background:transparent;transition:background-color var(--pfx-side-panel-motion-duration, .16s) ease,opacity var(--pfx-side-panel-motion-duration, .16s) ease;opacity:0}praxis-settings-panel .settings-panel.is-resizable:hover .settings-panel__resize-handle:before,praxis-settings-panel .settings-panel__resize-handle:focus-visible:before{opacity:1;background:var(--pfx-settings-panel-outline)}praxis-settings-panel .settings-panel-header{grid-area:header;display:flex;align-items:center;gap:var(--pfx-settings-panel-header-gap, 8px);padding:12px var(--pfx-settings-panel-header-padding-x, 20px);min-height:var(--pfx-settings-panel-header-height, 64px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);box-shadow:var(--pfx-settings-panel-header-shadow, var(--md-sys-elevation-level1, 0 2px 6px rgba(0, 0, 0, .08)));flex-shrink:0;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-header .spacer{flex:1 1 auto;min-width:0}praxis-settings-panel .settings-panel-status{grid-area:status;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px var(--pfx-settings-panel-status-padding-x, 20px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);color:var(--pfx-settings-panel-on-surface);font-size:.85rem;font-weight:500;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-status mat-icon{width:18px;height:18px;font-size:18px}praxis-settings-panel .settings-panel-status[data-status=dirty],praxis-settings-panel .settings-panel-status[data-status=invalid]{color:var(--pfx-settings-panel-error);background:color-mix(in srgb,var(--pfx-settings-panel-error-container) 30%,var(--pfx-settings-panel-surface-container-high))}praxis-settings-panel .settings-panel-status[data-status=saved]{color:var(--pfx-settings-panel-primary);background:color-mix(in srgb,var(--pfx-settings-panel-primary-container) 28%,var(--pfx-settings-panel-surface-container-high))}praxis-settings-panel .settings-panel-body{grid-area:body;overflow-y:auto;overflow-x:hidden;scroll-padding-top:var(--pfx-settings-panel-scroll-padding-start, 16px);scroll-padding-bottom:var(--pfx-settings-panel-scroll-padding-end, 88px);min-height:0;padding:var(--pfx-settings-panel-body-padding, 8px 16px 24px);background:var(--pfx-settings-panel-surface);display:flex;flex-direction:column;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-body>*{min-width:0;max-width:100%}praxis-settings-panel .settings-panel-content{display:block;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-content>*{min-width:0;max-width:100%;box-sizing:border-box}praxis-settings-panel .settings-panel-footer{grid-area:footer;border-top:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);box-shadow:var(--pfx-settings-panel-footer-shadow, var(--md-sys-elevation-level1, 0 -2px 6px rgba(0, 0, 0, .08)));display:flex;align-items:center;flex-wrap:wrap;padding:var(--pfx-settings-panel-footer-padding, 12px 20px);column-gap:var(--pfx-settings-panel-footer-gap, 12px);row-gap:8px;flex-shrink:0;min-width:0;max-width:100%}praxis-settings-panel .spacer{flex:1}praxis-settings-panel .settings-panel-title{display:inline-flex;align-items:center;flex:1 1 auto;gap:var(--pfx-settings-panel-title-gap, 8px);font-weight:700;line-height:1.2;letter-spacing:.2px;margin:0;min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel-title span{min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel-title mat-icon{color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel-title .title-icon{width:20px;height:20px;font-size:20px}praxis-settings-panel .settings-panel-footer button+button{margin-left:var(--pfx-settings-panel-footer-gap, 12px)}praxis-settings-panel .settings-panel-footer button{display:inline-flex;align-items:center}praxis-settings-panel .settings-panel-footer button .mat-icon{flex:0 0 20px;font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}praxis-settings-panel .settings-panel-footer .mat-button-wrapper{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px)}praxis-settings-panel .settings-panel-footer .mat-progress-spinner{margin-right:8px}praxis-settings-panel .settings-panel-footer .mat-flat-button[color=primary]{font-weight:600}praxis-settings-panel .settings-panel .mdc-button__label{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px);line-height:1}praxis-settings-panel .settings-panel .mdc-button__label>span{display:inline-flex;align-items:center;line-height:1}praxis-settings-panel .settings-panel .mdc-button__label .mat-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}@media(max-width:520px){praxis-settings-panel .settings-panel-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;padding:10px 12px;column-gap:8px}praxis-settings-panel .settings-panel-footer .spacer{display:none}praxis-settings-panel .settings-panel-footer button{justify-content:center;width:100%;min-width:0;padding-inline:8px}praxis-settings-panel .settings-panel-action-label{white-space:nowrap}praxis-settings-panel .settings-panel-footer button+button{margin-left:0}}@media(max-width:380px){praxis-settings-panel .settings-panel-footer{grid-template-columns:minmax(0,1fr)}praxis-settings-panel .settings-panel-action-label{white-space:normal;text-align:center}}praxis-settings-panel .settings-panel .mat-divider{background-color:var(--pfx-settings-panel-outline-variant)!important}praxis-settings-panel .settings-panel .mat-expansion-panel{background:var(--pfx-settings-panel-surface-container)!important;border:1px solid var(--pfx-settings-panel-outline-variant);border-radius:var(--md-sys-shape-corner-medium, 12px);box-shadow:var(--md-sys-elevation-level1, 0 2px 8px rgba(0, 0, 0, .08));color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel-header{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-content{color:var(--pfx-settings-panel-on-surface);flex-wrap:wrap;gap:4px 12px;min-width:0;overflow:visible}praxis-settings-panel .settings-panel .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover{background:color-mix(in srgb,var(--pfx-settings-panel-surface-container-high) 84%,var(--pfx-settings-panel-primary) 16%)}praxis-settings-panel .settings-panel .mat-expansion-panel.mat-expanded>.mat-expansion-panel-header{background:var(--pfx-settings-panel-surface-container-high)!important}praxis-settings-panel .settings-panel .mat-expansion-panel-header mat-icon,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-icon{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface);min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface-variant);flex-wrap:wrap;gap:8px}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title>*,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description>*{color:inherit}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title small,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description small{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-indicator,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-indicator:after{color:var(--pfx-settings-panel-on-surface-variant);border-color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-action-row{border-top-color:var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-accordion,praxis-settings-panel .settings-panel .mat-accordion .mat-expansion-panel-spacing{background:transparent!important}praxis-settings-panel .settings-panel .mat-expansion-panel-content,praxis-settings-panel .settings-panel .mat-expansion-panel-content-wrapper,praxis-settings-panel .settings-panel .mat-expansion-panel-body{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-expansion-panel-body{padding:8px}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-expansion-panel-body>*{color:inherit}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header{border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab{min-width:0}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab:hover .mdc-tab__text-label,praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab:focus .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination-chevron{border-color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination:not(.mat-mdc-tab-header-pagination-disabled):hover{background:color-mix(in srgb,var(--pfx-settings-panel-surface-container-high) 84%,var(--pfx-settings-panel-primary) 16%)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab-indicator__content--underline{border-color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel .mat-mdc-card{background:var(--pfx-settings-panel-surface-container-low);border:1px solid var(--pfx-settings-panel-outline-variant);color:var(--pfx-settings-panel-on-surface);box-shadow:var(--md-sys-elevation-level1, 0 2px 8px rgba(0, 0, 0, .08))}praxis-settings-panel .settings-panel .mat-mdc-card-subtitle,praxis-settings-panel .settings-panel .mat-mdc-card-content{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-card-title{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field{width:100%;--mdc-filled-text-field-container-color: var( --pfx-settings-panel-surface-container );--mdc-filled-text-field-hover-container-color: var( --pfx-settings-panel-surface-container-high );--mdc-filled-text-field-focus-container-color: var( --pfx-settings-panel-surface-container-high );--mdc-filled-text-field-active-indicator-color: var( --pfx-settings-panel-outline-variant );--mdc-filled-text-field-hover-active-indicator-color: var( --pfx-settings-panel-secondary );--mdc-filled-text-field-focus-active-indicator-color: var( --pfx-settings-panel-primary );--mdc-filled-text-field-label-text-color: var( --pfx-settings-panel-on-surface-variant );--mdc-filled-text-field-focus-label-text-color: var( --pfx-settings-panel-primary );--mdc-filled-text-field-input-text-color: var( --pfx-settings-panel-on-surface );--mdc-filled-text-field-caret-color: var(--pfx-settings-panel-primary);--mdc-outlined-text-field-outline-color: var( --pfx-settings-panel-outline-variant );--mdc-outlined-text-field-hover-outline-color: var( --pfx-settings-panel-secondary );--mdc-outlined-text-field-focus-outline-color: var( --pfx-settings-panel-primary );--mdc-outlined-text-field-label-text-color: var( --pfx-settings-panel-on-surface-variant );--mdc-outlined-text-field-focus-label-text-color: var( --pfx-settings-panel-primary );--mdc-outlined-text-field-input-text-color: var( --pfx-settings-panel-on-surface );--mdc-outlined-text-field-caret-color: var(--pfx-settings-panel-primary);--mat-form-field-focus-select-arrow-color: var( --pfx-settings-panel-primary );--mat-form-field-enabled-select-arrow-color: var( --pfx-settings-panel-on-surface-variant )}praxis-settings-panel .settings-panel .mdc-text-field--filled{background-color:var(--pfx-settings-panel-surface-container)!important;border-radius:var(--md-sys-shape-corner-small, 8px) var(--md-sys-shape-corner-small, 8px) 0 0}praxis-settings-panel .settings-panel .mat-mdc-text-field-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-flex,praxis-settings-panel .settings-panel .mat-mdc-form-field-infix,praxis-settings-panel .settings-panel .mat-mdc-form-field-focus-overlay{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field-focus-overlay{opacity:0}praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-floating-label,praxis-settings-panel .settings-panel .mat-mdc-select-value,praxis-settings-panel .settings-panel .mat-mdc-select-arrow,praxis-settings-panel .settings-panel .mat-mdc-form-field .mat-mdc-floating-label{color:var(--pfx-settings-panel-on-surface-variant)!important}praxis-settings-panel .settings-panel .mdc-text-field--filled.mdc-text-field--focused .mdc-floating-label,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field input,praxis-settings-panel .settings-panel .mat-mdc-form-field textarea,praxis-settings-panel .settings-panel .mat-mdc-form-field .mdc-text-field__input{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field-subscript-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-hint-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-error-wrapper,praxis-settings-panel .settings-panel .mat-mdc-hint{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-button-toggle-group{border-color:var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-button-toggle{background:var(--pfx-settings-panel-surface-container-low);color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-button-toggle+.mat-button-toggle{border-left-color:var(--pfx-settings-panel-outline-variant)}praxis-settings-panel .settings-panel .mat-button-toggle-checked{background:var(--pfx-settings-panel-primary-container)!important;color:var(--pfx-settings-panel-on-primary-container)!important}praxis-settings-panel .settings-panel .mat-button-toggle .mat-icon,praxis-settings-panel .settings-panel .mat-button-toggle-checked .mat-icon{color:inherit}praxis-settings-panel .settings-panel .mat-mdc-slide-toggle .mdc-label{color:var(--pfx-settings-panel-on-surface)}.settings-panel{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%}.settings-panel-body{overflow-x:hidden;min-width:0}.settings-panel-body>*{min-width:0;max-width:100%}.praxis-settings-panel-backdrop{background:var(--pfx-backdrop, rgba(8, 15, 26, .42));backdrop-filter:blur(var(--pfx-backdrop-blur, 6px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 6px)) saturate(110%)}.praxis-settings-panel-pane{position:fixed!important;top:0!important;right:0!important;display:flex!important;align-items:stretch!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;z-index:var(--praxis-layer-settings-panel, 1220)!important;transition:width var(--pfx-side-panel-motion-duration-enter, .3s) var(--pfx-side-panel-motion-easing-enter, ease)}.praxis-settings-panel-pane .settings-panel{pointer-events:auto}@media(prefers-reduced-motion:reduce){.praxis-settings-panel-pane{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SettingsPanelComponent, isStandalone: true, selector: "praxis-settings-panel", host: { listeners: { "document:keydown": "handleKeydown($event)", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerEnd($event)", "document:pointercancel": "onDocumentPointerEnd($event)" } }, providers: [providePraxisSettingsPanelI18n()], viewQueries: [{ propertyName: "focusTrap", first: true, predicate: CdkTrapFocus, descendants: true }, { propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"settings-panel\"\n  data-testid=\"settings-panel-root\"\n  [class.expanded]=\"expanded\"\n  [class.settings-panel--preview]=\"previewing\"\n  [class.is-resizable]=\"showResizeHandle\"\n  [ngStyle]=\"panelInlineStyles\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"interactionActive ? 'true' : null\"\n  [attr.aria-hidden]=\"interactionActive ? null : 'true'\"\n  [attr.inert]=\"interactionActive ? null : ''\"\n  [attr.aria-labelledby]=\"previewing ? titleId + '-preview' : titleId\"\n  [cdkTrapFocus]=\"interactionActive\"\n  [cdkTrapFocusAutoCapture]=\"true\"\n  >\n  @if (showResizeHandle && !previewing) {\n    <div\n      class=\"settings-panel__resize-handle\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-orientation=\"vertical\"\n      [attr.aria-label]=\"resizeHandleLabel\"\n      (pointerdown)=\"onResizeHandlePointerDown($event)\"\n      (keydown)=\"onResizeHandleKeydown($event)\"\n    ></div>\n  }\n  @if (previewing) {\n    <section class=\"settings-panel-preview-bar\" data-testid=\"settings-panel-preview-bar\">\n      <div><strong [id]=\"titleId + '-preview'\">{{ tx('Page preview') }}</strong><p>{{ tx('Inspect the result. Return to keep editing; nothing is saved here.') }}</p></div>\n      <button mat-flat-button type=\"button\" data-testid=\"settings-panel-return\" (click)=\"returnFromPreview()\">{{ tx('Back to settings') }}</button>\n    </section>\n  }\n  <header class=\"settings-panel-header\" [hidden]=\"previewing\">\n    <h2 class=\"settings-panel-title\" [id]=\"titleId\">\n      @if (titleIcon) {\n        <mat-icon class=\"title-icon\" [praxisIcon]=\"titleIcon\"></mat-icon>\n      }\n      <span>{{ title }}</span>\n    </h2>\n    <span class=\"spacer\"></span>\n    @if (previewTarget) {\n      <button mat-stroked-button type=\"button\" data-testid=\"settings-panel-preview\" [disabled]=\"!canInspectPreview\" (click)=\"showPreview()\">\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'visibility'\"></mat-icon>{{ tx('View result') }}\n      </button>\n    }\n    <button\n      [praxisIconButton]=\"expanded ? 'close_fullscreen' : 'open_in_full'\"\n      size=\"compact\"\n      type=\"button\"\n      data-testid=\"settings-panel-toggle-expand\"\n      [attr.aria-label]=\"expanded ? tx('Collapse panel') : tx('Expand panel')\"\n      [attr.aria-expanded]=\"expanded\"\n      [matTooltip]=\"expanded ? tx('Collapse panel') : tx('Expand panel')\"\n      (click)=\"toggleExpand()\"\n    ></button>\n    <button\n      praxisIconButton=\"close\"\n      size=\"compact\"\n      type=\"button\"\n      data-testid=\"settings-panel-close-icon\"\n      [attr.aria-label]=\"tx('Close')\"\n      [matTooltip]=\"tx('Close')\"\n      (click)=\"onCancel()\"\n    ></button>\n  </header>\n  @if (showStatusMessage && !previewing) {\n    <div\n      class=\"settings-panel-status\"\n      [attr.data-status]=\"statusTone\"\n      role=\"status\"\n      aria-live=\"polite\"\n      >\n      <mat-icon\n        aria-hidden=\"true\"\n        [praxisIcon]=\"\n          statusTone === 'dirty' || statusTone === 'invalid'\n            ? 'warning'\n            : statusTone === 'saved'\n              ? 'check_circle'\n              : statusTone === 'busy'\n                ? 'autorenew'\n                : 'info'\n        \"\n      ></mat-icon>\n      <span>{{ statusMessage }}</span>\n    </div>\n  }\n  <div class=\"settings-panel-body\" [hidden]=\"previewing\">\n    <ng-template #contentHost></ng-template>\n  </div>\n  <footer class=\"settings-panel-footer\" [hidden]=\"previewing\">\n    <button\n      mat-button\n      type=\"button\"\n      data-testid=\"settings-panel-reset\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onReset()\"\n      [disabled]=\"isBusy\"\n      >\n      <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'restart_alt'\"></mat-icon>\n      <span>{{ tx('Reset') }}</span>\n    </button>\n    <span class=\"spacer\"></span>\n    <button\n      mat-button\n      type=\"button\"\n      data-testid=\"settings-panel-cancel\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onCancel()\"\n      [disabled]=\"isBusy\"\n      >\n      <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'close'\"></mat-icon>\n      <span>{{ tx('Cancel') }}</span>\n    </button>\n    <button\n      mat-stroked-button\n      type=\"button\"\n      data-testid=\"settings-panel-apply\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onApply()\"\n      [disabled]=\"!canApply\"\n      [matTooltip]=\"applySaveDisabledReason\"\n      [matTooltipDisabled]=\"canApply || !diagnostics.showDisabledReason\"\n      [attr.aria-busy]=\"isBusy\"\n      [attr.aria-label]=\"applyActionLabel || 'Apply'\"\n      >\n      @if (showBusyIndicator) {\n        <mat-progress-spinner\n          mode=\"indeterminate\"\n          diameter=\"20\"\n        ></mat-progress-spinner>\n      }\n      @if (!showBusyIndicator) {\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'done'\"></mat-icon>\n        <span class=\"settings-panel-action-label settings-panel-action-label--apply\">{{ applyActionLabel }}</span>\n      }\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      type=\"button\"\n      data-testid=\"settings-panel-save\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onSave()\"\n      [disabled]=\"!canSave\"\n      [matTooltip]=\"applySaveDisabledReason\"\n      [matTooltipDisabled]=\"canSave || !diagnostics.showDisabledReason\"\n      [attr.aria-busy]=\"isBusy\"\n      [attr.aria-label]=\"saveActionLabel || 'Save & Close'\"\n      >\n      @if (showBusyIndicator) {\n        <mat-progress-spinner\n          mode=\"indeterminate\"\n          diameter=\"20\"\n        ></mat-progress-spinner>\n      }\n      @if (!showBusyIndicator) {\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'save'\"></mat-icon>\n        <span class=\"settings-panel-action-label settings-panel-action-label--save\">{{ saveActionLabel }}</span>\n      }\n    </button>\n  </footer>\n</div>\n", styles: ["@charset \"UTF-8\";praxis-settings-panel{display:block;height:100%;width:100%;min-width:0;flex:1 1 auto;box-sizing:border-box}praxis-settings-panel .settings-panel{position:relative;container:settings-panel-shell/inline-size;--pfx-settings-panel-surface-container: var( --md-sys-color-surface-container, #ffffff );--pfx-settings-panel-surface-container-high: var( --md-sys-color-surface-container-high, #f7f7f7 );--pfx-settings-panel-surface-container-low: var( --md-sys-color-surface-container-low, #f2f4f7 );--pfx-settings-panel-surface: var(--md-sys-color-surface, #ffffff);--pfx-settings-panel-on-surface: var(--md-sys-color-on-surface, #111827);--pfx-settings-panel-on-surface-variant: var( --md-sys-color-on-surface-variant, rgba(17, 24, 39, .72) );--pfx-settings-panel-outline: var( --md-sys-color-outline, rgba(15, 23, 42, .24) );--pfx-settings-panel-outline-variant: var( --md-sys-color-outline-variant, rgba(15, 23, 42, .12) );--pfx-settings-panel-primary: var(--md-sys-color-primary, #2563eb);--pfx-settings-panel-primary-container: var( --md-sys-color-primary-container, rgba(37, 99, 235, .14) );--pfx-settings-panel-on-primary-container: var( --md-sys-color-on-primary-container, #0f172a );--pfx-settings-panel-secondary: var( --md-sys-color-secondary, var(--pfx-settings-panel-primary) );--pfx-settings-panel-error: var(--md-sys-color-error, #b3261e);--pfx-settings-panel-error-container: var( --md-sys-color-error-container, rgba(179, 38, 30, .14) );display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:\"header\" \"status\" \"body\" \"footer\";height:100%;background:var(--pfx-settings-panel-surface-container);color:var(--pfx-settings-panel-on-surface);border-left:1px solid var(--pfx-settings-panel-outline-variant);width:100%;max-width:100%;min-width:0;box-sizing:border-box;box-shadow:var(--pfx-settings-panel-elevation, var(--md-sys-elevation-level2, 0 8px 24px rgba(0, 0, 0, .16)));overflow:hidden}praxis-settings-panel .settings-panel__resize-handle{position:absolute;inset:0 auto 0 0;width:12px;cursor:col-resize;touch-action:none;z-index:3;outline:none}praxis-settings-panel .settings-panel__resize-handle:before{content:\"\";position:absolute;inset:0 auto 0 4px;width:2px;background:transparent;transition:background-color var(--pfx-side-panel-motion-duration, .16s) ease,opacity var(--pfx-side-panel-motion-duration, .16s) ease;opacity:0}praxis-settings-panel .settings-panel.is-resizable:hover .settings-panel__resize-handle:before,praxis-settings-panel .settings-panel__resize-handle:focus-visible:before{opacity:1;background:var(--pfx-settings-panel-outline)}praxis-settings-panel .settings-panel-header{grid-area:header;display:flex;align-items:center;gap:var(--pfx-settings-panel-header-gap, 8px);padding:12px var(--pfx-settings-panel-header-padding-x, 20px);min-height:var(--pfx-settings-panel-header-height, 64px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);box-shadow:var(--pfx-settings-panel-header-shadow, var(--md-sys-elevation-level1, 0 2px 6px rgba(0, 0, 0, .08)));flex-shrink:0;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-header .spacer{flex:1 1 auto;min-width:0}praxis-settings-panel .settings-panel-status{grid-area:status;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px var(--pfx-settings-panel-status-padding-x, 20px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);color:var(--pfx-settings-panel-on-surface);font-size:.85rem;font-weight:500;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-status mat-icon{width:18px;height:18px;font-size:18px}praxis-settings-panel .settings-panel-status[data-status=dirty],praxis-settings-panel .settings-panel-status[data-status=invalid]{color:var(--pfx-settings-panel-error);background:color-mix(in srgb,var(--pfx-settings-panel-error-container) 30%,var(--pfx-settings-panel-surface-container-high))}praxis-settings-panel .settings-panel-status[data-status=saved]{color:var(--pfx-settings-panel-primary);background:color-mix(in srgb,var(--pfx-settings-panel-primary-container) 28%,var(--pfx-settings-panel-surface-container-high))}praxis-settings-panel .settings-panel-body{grid-area:body;overflow-y:auto;overflow-x:hidden;scroll-padding-top:var(--pfx-settings-panel-scroll-padding-start, 16px);scroll-padding-bottom:var(--pfx-settings-panel-scroll-padding-end, 88px);min-height:0;padding:var(--pfx-settings-panel-body-padding, 8px 16px 24px);background:var(--pfx-settings-panel-surface);display:flex;flex-direction:column;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-body>*{min-width:0;max-width:100%}praxis-settings-panel .settings-panel-content{display:block;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-content>*{min-width:0;max-width:100%;box-sizing:border-box}praxis-settings-panel .settings-panel-footer{grid-area:footer;border-top:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);box-shadow:var(--pfx-settings-panel-footer-shadow, var(--md-sys-elevation-level1, 0 -2px 6px rgba(0, 0, 0, .08)));display:flex;align-items:center;flex-wrap:wrap;padding:var(--pfx-settings-panel-footer-padding, 12px 20px);column-gap:var(--pfx-settings-panel-footer-gap, 12px);row-gap:8px;flex-shrink:0;min-width:0;max-width:100%}praxis-settings-panel .spacer{flex:1}praxis-settings-panel .settings-panel-title{display:inline-flex;align-items:center;flex:1 1 auto;gap:var(--pfx-settings-panel-title-gap, 8px);font-weight:700;line-height:1.2;letter-spacing:.2px;margin:0;min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel-title span{min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel-title mat-icon{color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel-title .title-icon{width:20px;height:20px;font-size:20px}praxis-settings-panel .settings-panel-footer button{display:inline-flex;align-items:center}praxis-settings-panel .settings-panel-footer button .mat-icon{flex:0 0 20px;font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}praxis-settings-panel .settings-panel-footer .mat-button-wrapper{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px)}praxis-settings-panel .settings-panel-footer .mat-progress-spinner{margin-right:8px}praxis-settings-panel .settings-panel-footer .mat-flat-button[color=primary]{font-weight:600}praxis-settings-panel .settings-panel-footer .mdc-button__label{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px);line-height:1}praxis-settings-panel .settings-panel-footer .mdc-button__label>span{display:inline-flex;align-items:center;line-height:1}praxis-settings-panel .settings-panel-footer .mdc-button__label .mat-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}@container settings-panel-shell (max-width: 520px){praxis-settings-panel .settings-panel-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;padding:10px 12px;column-gap:8px}praxis-settings-panel .settings-panel-footer .spacer{display:none}praxis-settings-panel .settings-panel-footer button{justify-content:center;width:100%;min-width:0;min-height:44px;height:auto;padding:8px}praxis-settings-panel .settings-panel-action-label{white-space:normal;overflow-wrap:anywhere;text-align:center}praxis-settings-panel .settings-panel-footer .mdc-button__label{min-width:0;max-width:100%}praxis-settings-panel .settings-panel-footer .mdc-button__label>span{min-width:0;line-height:1.25}}@container settings-panel-shell (max-width: 280px){praxis-settings-panel .settings-panel-footer{grid-template-columns:minmax(0,1fr)}}praxis-settings-panel .settings-panel .mat-divider{background-color:var(--pfx-settings-panel-outline-variant)!important}praxis-settings-panel .settings-panel .mat-expansion-panel{background:var(--pfx-settings-panel-surface-container)!important;border:1px solid var(--pfx-settings-panel-outline-variant);border-radius:var(--md-sys-shape-corner-medium, 12px);box-shadow:var(--md-sys-elevation-level1, 0 2px 8px rgba(0, 0, 0, .08));color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel-header{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-content{color:var(--pfx-settings-panel-on-surface);flex-wrap:wrap;gap:4px 12px;min-width:0;overflow:visible}praxis-settings-panel .settings-panel .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover{background:color-mix(in srgb,var(--pfx-settings-panel-surface-container-high) 84%,var(--pfx-settings-panel-primary) 16%)}praxis-settings-panel .settings-panel .mat-expansion-panel.mat-expanded>.mat-expansion-panel-header{background:var(--pfx-settings-panel-surface-container-high)!important}praxis-settings-panel .settings-panel .mat-expansion-panel-header mat-icon,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-icon{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface);min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface-variant);flex-wrap:wrap;gap:8px}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title>*,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description>*{color:inherit}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title small,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description small{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-indicator,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-indicator:after{color:var(--pfx-settings-panel-on-surface-variant);border-color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-action-row{border-top-color:var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-accordion,praxis-settings-panel .settings-panel .mat-accordion .mat-expansion-panel-spacing{background:transparent!important}praxis-settings-panel .settings-panel .mat-expansion-panel-content,praxis-settings-panel .settings-panel .mat-expansion-panel-content-wrapper,praxis-settings-panel .settings-panel .mat-expansion-panel-body{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-expansion-panel-body{padding:8px}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-expansion-panel-body>*{color:inherit}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header{border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab{min-width:0}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab:hover .mdc-tab__text-label,praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab:focus .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination-chevron{border-color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination:not(.mat-mdc-tab-header-pagination-disabled):hover{background:color-mix(in srgb,var(--pfx-settings-panel-surface-container-high) 84%,var(--pfx-settings-panel-primary) 16%)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab-indicator__content--underline{border-color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel .mat-mdc-card{background:var(--pfx-settings-panel-surface-container-low);border:1px solid var(--pfx-settings-panel-outline-variant);color:var(--pfx-settings-panel-on-surface);box-shadow:var(--md-sys-elevation-level1, 0 2px 8px rgba(0, 0, 0, .08))}praxis-settings-panel .settings-panel .mat-mdc-card-subtitle,praxis-settings-panel .settings-panel .mat-mdc-card-content{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-card-title{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field{width:100%;--mdc-filled-text-field-container-color: var( --pfx-settings-panel-surface-container );--mdc-filled-text-field-hover-container-color: var( --pfx-settings-panel-surface-container-high );--mdc-filled-text-field-focus-container-color: var( --pfx-settings-panel-surface-container-high );--mdc-filled-text-field-active-indicator-color: var( --pfx-settings-panel-outline-variant );--mdc-filled-text-field-hover-active-indicator-color: var( --pfx-settings-panel-secondary );--mdc-filled-text-field-focus-active-indicator-color: var( --pfx-settings-panel-primary );--mdc-filled-text-field-label-text-color: var( --pfx-settings-panel-on-surface-variant );--mdc-filled-text-field-focus-label-text-color: var( --pfx-settings-panel-primary );--mdc-filled-text-field-input-text-color: var( --pfx-settings-panel-on-surface );--mdc-filled-text-field-caret-color: var(--pfx-settings-panel-primary);--mdc-outlined-text-field-outline-color: var( --pfx-settings-panel-outline-variant );--mdc-outlined-text-field-hover-outline-color: var( --pfx-settings-panel-secondary );--mdc-outlined-text-field-focus-outline-color: var( --pfx-settings-panel-primary );--mdc-outlined-text-field-label-text-color: var( --pfx-settings-panel-on-surface-variant );--mdc-outlined-text-field-focus-label-text-color: var( --pfx-settings-panel-primary );--mdc-outlined-text-field-input-text-color: var( --pfx-settings-panel-on-surface );--mdc-outlined-text-field-caret-color: var(--pfx-settings-panel-primary);--mat-form-field-focus-select-arrow-color: var( --pfx-settings-panel-primary );--mat-form-field-enabled-select-arrow-color: var( --pfx-settings-panel-on-surface-variant )}praxis-settings-panel .settings-panel .mdc-text-field--filled{background-color:var(--pfx-settings-panel-surface-container)!important;border-radius:var(--md-sys-shape-corner-small, 8px) var(--md-sys-shape-corner-small, 8px) 0 0}praxis-settings-panel .settings-panel .mat-mdc-text-field-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-flex,praxis-settings-panel .settings-panel .mat-mdc-form-field-infix,praxis-settings-panel .settings-panel .mat-mdc-form-field-focus-overlay{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field-focus-overlay{opacity:0}praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-floating-label,praxis-settings-panel .settings-panel .mat-mdc-select-value,praxis-settings-panel .settings-panel .mat-mdc-select-arrow,praxis-settings-panel .settings-panel .mat-mdc-form-field .mat-mdc-floating-label{color:var(--pfx-settings-panel-on-surface-variant)!important}praxis-settings-panel .settings-panel .mdc-text-field--filled.mdc-text-field--focused .mdc-floating-label,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field input,praxis-settings-panel .settings-panel .mat-mdc-form-field textarea,praxis-settings-panel .settings-panel .mat-mdc-form-field .mdc-text-field__input{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field-subscript-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-hint-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-error-wrapper,praxis-settings-panel .settings-panel .mat-mdc-hint{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-button-toggle-group{border-color:var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-button-toggle{background:var(--pfx-settings-panel-surface-container-low);color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-button-toggle+.mat-button-toggle{border-left-color:var(--pfx-settings-panel-outline-variant)}praxis-settings-panel .settings-panel .mat-button-toggle-checked{background:var(--pfx-settings-panel-primary-container)!important;color:var(--pfx-settings-panel-on-primary-container)!important}praxis-settings-panel .settings-panel .mat-button-toggle .mat-icon,praxis-settings-panel .settings-panel .mat-button-toggle-checked .mat-icon{color:inherit}praxis-settings-panel .settings-panel .mat-mdc-slide-toggle .mdc-label{color:var(--pfx-settings-panel-on-surface)}.settings-panel{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%}.settings-panel-body{overflow-x:hidden;min-width:0}.settings-panel-body>*{min-width:0;max-width:100%}.praxis-settings-panel-backdrop{background:var(--pfx-backdrop, rgba(8, 15, 26, .42));backdrop-filter:blur(var(--pfx-backdrop-blur, 6px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 6px)) saturate(110%)}.praxis-settings-panel-pane{position:fixed!important;top:0!important;right:0!important;display:flex!important;align-items:stretch!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;z-index:var(--praxis-layer-settings-panel, 1220)!important;transition:width var(--pfx-side-panel-motion-duration-enter, .3s) var(--pfx-side-panel-motion-easing-enter, ease)}.praxis-settings-panel-pane .settings-panel{pointer-events:auto}@media(prefers-reduced-motion:reduce){.praxis-settings-panel-pane{transition:none}}.praxis-settings-panel-pane.praxis-settings-panel-pane--preview{top:auto!important;bottom:12px!important;right:12px!important;height:auto!important;width:min(560px,100vw - 24px)!important;min-width:0!important;transition:none}.praxis-settings-panel-backdrop.praxis-settings-panel-backdrop--preview{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.praxis-settings-preview-target{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}praxis-settings-panel .settings-panel [hidden]{display:none!important}praxis-settings-panel .settings-panel--preview{height:auto;min-height:0;grid-template-rows:auto;border-radius:16px}praxis-settings-panel .settings-panel-preview-bar{display:flex;align-items:center;gap:16px;padding:16px;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel-preview-bar p{margin:4px 0 0;color:var(--pfx-settings-panel-on-surface-variant);font-size:.875rem}praxis-settings-panel .settings-panel-preview-bar button{flex-shrink:0}@container settings-panel-shell (max-width: 599px){praxis-settings-panel .settings-panel-header:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start}praxis-settings-panel .settings-panel-header .spacer{display:none}praxis-settings-panel .settings-panel-header .settings-panel-title{grid-column:1;grid-row:1;overflow-wrap:anywhere}praxis-settings-panel .settings-panel-header [data-testid=settings-panel-toggle-expand]{grid-column:2;grid-row:1}praxis-settings-panel .settings-panel-header [data-testid=settings-panel-close-icon]{grid-column:3;grid-row:1}praxis-settings-panel .settings-panel-header [data-testid=settings-panel-preview]{grid-column:1/-1;grid-row:2;justify-self:start;max-width:100%}praxis-settings-panel .settings-panel-preview-bar{flex-direction:column;align-items:stretch;gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsPanelComponent, decorators: [{
             type: Component,
@@ -1046,8 +1155,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         CdkTrapFocus,
                         MatProgressSpinnerModule,
                         MatDialogModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [providePraxisSettingsPanelI18n()], template: "<div\n  class=\"settings-panel\"\n  data-testid=\"settings-panel-root\"\n  [class.expanded]=\"expanded\"\n  [class.is-resizable]=\"showResizeHandle\"\n  [ngStyle]=\"panelInlineStyles\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"interactionActive ? 'true' : null\"\n  [attr.aria-hidden]=\"interactionActive ? null : 'true'\"\n  [attr.inert]=\"interactionActive ? null : ''\"\n  [attr.aria-labelledby]=\"titleId\"\n  [cdkTrapFocus]=\"interactionActive\"\n  [cdkTrapFocusAutoCapture]=\"interactionActive\"\n  >\n  @if (showResizeHandle) {\n    <div\n      class=\"settings-panel__resize-handle\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-orientation=\"vertical\"\n      [attr.aria-label]=\"resizeHandleLabel\"\n      (pointerdown)=\"onResizeHandlePointerDown($event)\"\n      (keydown)=\"onResizeHandleKeydown($event)\"\n    ></div>\n  }\n  <header class=\"settings-panel-header\">\n    <h2 class=\"settings-panel-title\" [id]=\"titleId\">\n      @if (titleIcon) {\n        <mat-icon class=\"title-icon\" [praxisIcon]=\"titleIcon\"></mat-icon>\n      }\n      <span>{{ title }}</span>\n    </h2>\n    <span class=\"spacer\"></span>\n    <button\n      [praxisIconButton]=\"expanded ? 'close_fullscreen' : 'open_in_full'\"\n      size=\"compact\"\n      type=\"button\"\n      data-testid=\"settings-panel-toggle-expand\"\n      [attr.aria-label]=\"expanded ? tx('Collapse panel') : tx('Expand panel')\"\n      [attr.aria-expanded]=\"expanded\"\n      [matTooltip]=\"expanded ? tx('Collapse panel') : tx('Expand panel')\"\n      (click)=\"toggleExpand()\"\n    ></button>\n    <button\n      praxisIconButton=\"close\"\n      size=\"compact\"\n      type=\"button\"\n      data-testid=\"settings-panel-close-icon\"\n      [attr.aria-label]=\"tx('Close')\"\n      [matTooltip]=\"tx('Close')\"\n      (click)=\"onCancel()\"\n    ></button>\n  </header>\n  @if (showStatusMessage) {\n    <div\n      class=\"settings-panel-status\"\n      [attr.data-status]=\"statusTone\"\n      role=\"status\"\n      aria-live=\"polite\"\n      >\n      <mat-icon\n        aria-hidden=\"true\"\n        [praxisIcon]=\"\n          statusTone === 'dirty' || statusTone === 'invalid'\n            ? 'warning'\n            : statusTone === 'saved'\n              ? 'check_circle'\n              : statusTone === 'busy'\n                ? 'autorenew'\n                : 'info'\n        \"\n      ></mat-icon>\n      <span>{{ statusMessage }}</span>\n    </div>\n  }\n  <div class=\"settings-panel-body\">\n    <ng-template #contentHost></ng-template>\n  </div>\n  <footer class=\"settings-panel-footer\">\n    <button\n      mat-button\n      type=\"button\"\n      data-testid=\"settings-panel-reset\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onReset()\"\n      [disabled]=\"isBusy\"\n      >\n      <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'restart_alt'\"></mat-icon>\n      <span>{{ tx('Reset') }}</span>\n    </button>\n    <span class=\"spacer\"></span>\n    <button\n      mat-button\n      type=\"button\"\n      data-testid=\"settings-panel-cancel\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onCancel()\"\n      [disabled]=\"isBusy\"\n      >\n      <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'close'\"></mat-icon>\n      <span>{{ tx('Cancel') }}</span>\n    </button>\n    <button\n      mat-stroked-button\n      type=\"button\"\n      data-testid=\"settings-panel-apply\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onApply()\"\n      [disabled]=\"!canApply\"\n      [matTooltip]=\"applySaveDisabledReason\"\n      [matTooltipDisabled]=\"canApply || !diagnostics.showDisabledReason\"\n      [attr.aria-busy]=\"isBusy\"\n      [attr.aria-label]=\"applyActionLabel || 'Apply'\"\n      >\n      @if (showBusyIndicator) {\n        <mat-progress-spinner\n          mode=\"indeterminate\"\n          diameter=\"20\"\n        ></mat-progress-spinner>\n      }\n      @if (!showBusyIndicator) {\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'done'\"></mat-icon>\n        <span class=\"settings-panel-action-label settings-panel-action-label--apply\">{{ applyActionLabel }}</span>\n      }\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      type=\"button\"\n      data-testid=\"settings-panel-save\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onSave()\"\n      [disabled]=\"!canSave\"\n      [matTooltip]=\"applySaveDisabledReason\"\n      [matTooltipDisabled]=\"canSave || !diagnostics.showDisabledReason\"\n      [attr.aria-busy]=\"isBusy\"\n      [attr.aria-label]=\"saveActionLabel || 'Save & Close'\"\n      >\n      @if (showBusyIndicator) {\n        <mat-progress-spinner\n          mode=\"indeterminate\"\n          diameter=\"20\"\n        ></mat-progress-spinner>\n      }\n      @if (!showBusyIndicator) {\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'save'\"></mat-icon>\n        <span class=\"settings-panel-action-label settings-panel-action-label--save\">{{ saveActionLabel }}</span>\n      }\n    </button>\n  </footer>\n</div>\n", styles: ["@charset \"UTF-8\";praxis-settings-panel{display:block;height:100%;width:100%;min-width:0;flex:1 1 auto;box-sizing:border-box}praxis-settings-panel .settings-panel{position:relative;--pfx-settings-panel-surface-container: var( --md-sys-color-surface-container, #ffffff );--pfx-settings-panel-surface-container-high: var( --md-sys-color-surface-container-high, #f7f7f7 );--pfx-settings-panel-surface-container-low: var( --md-sys-color-surface-container-low, #f2f4f7 );--pfx-settings-panel-surface: var(--md-sys-color-surface, #ffffff);--pfx-settings-panel-on-surface: var(--md-sys-color-on-surface, #111827);--pfx-settings-panel-on-surface-variant: var( --md-sys-color-on-surface-variant, rgba(17, 24, 39, .72) );--pfx-settings-panel-outline: var( --md-sys-color-outline, rgba(15, 23, 42, .24) );--pfx-settings-panel-outline-variant: var( --md-sys-color-outline-variant, rgba(15, 23, 42, .12) );--pfx-settings-panel-primary: var(--md-sys-color-primary, #2563eb);--pfx-settings-panel-primary-container: var( --md-sys-color-primary-container, rgba(37, 99, 235, .14) );--pfx-settings-panel-on-primary-container: var( --md-sys-color-on-primary-container, #0f172a );--pfx-settings-panel-secondary: var( --md-sys-color-secondary, var(--pfx-settings-panel-primary) );--pfx-settings-panel-error: var(--md-sys-color-error, #b3261e);--pfx-settings-panel-error-container: var( --md-sys-color-error-container, rgba(179, 38, 30, .14) );display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:\"header\" \"status\" \"body\" \"footer\";height:100%;background:var(--pfx-settings-panel-surface-container);color:var(--pfx-settings-panel-on-surface);border-left:1px solid var(--pfx-settings-panel-outline-variant);width:100%;max-width:100%;min-width:0;box-sizing:border-box;box-shadow:var(--pfx-settings-panel-elevation, var(--md-sys-elevation-level2, 0 8px 24px rgba(0, 0, 0, .16)));overflow:hidden}praxis-settings-panel .settings-panel__resize-handle{position:absolute;inset:0 auto 0 0;width:12px;cursor:col-resize;touch-action:none;z-index:3;outline:none}praxis-settings-panel .settings-panel__resize-handle:before{content:\"\";position:absolute;inset:0 auto 0 4px;width:2px;background:transparent;transition:background-color var(--pfx-side-panel-motion-duration, .16s) ease,opacity var(--pfx-side-panel-motion-duration, .16s) ease;opacity:0}praxis-settings-panel .settings-panel.is-resizable:hover .settings-panel__resize-handle:before,praxis-settings-panel .settings-panel__resize-handle:focus-visible:before{opacity:1;background:var(--pfx-settings-panel-outline)}praxis-settings-panel .settings-panel-header{grid-area:header;display:flex;align-items:center;gap:var(--pfx-settings-panel-header-gap, 8px);padding:12px var(--pfx-settings-panel-header-padding-x, 20px);min-height:var(--pfx-settings-panel-header-height, 64px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);box-shadow:var(--pfx-settings-panel-header-shadow, var(--md-sys-elevation-level1, 0 2px 6px rgba(0, 0, 0, .08)));flex-shrink:0;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-header .spacer{flex:1 1 auto;min-width:0}praxis-settings-panel .settings-panel-status{grid-area:status;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px var(--pfx-settings-panel-status-padding-x, 20px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);color:var(--pfx-settings-panel-on-surface);font-size:.85rem;font-weight:500;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-status mat-icon{width:18px;height:18px;font-size:18px}praxis-settings-panel .settings-panel-status[data-status=dirty],praxis-settings-panel .settings-panel-status[data-status=invalid]{color:var(--pfx-settings-panel-error);background:color-mix(in srgb,var(--pfx-settings-panel-error-container) 30%,var(--pfx-settings-panel-surface-container-high))}praxis-settings-panel .settings-panel-status[data-status=saved]{color:var(--pfx-settings-panel-primary);background:color-mix(in srgb,var(--pfx-settings-panel-primary-container) 28%,var(--pfx-settings-panel-surface-container-high))}praxis-settings-panel .settings-panel-body{grid-area:body;overflow-y:auto;overflow-x:hidden;scroll-padding-top:var(--pfx-settings-panel-scroll-padding-start, 16px);scroll-padding-bottom:var(--pfx-settings-panel-scroll-padding-end, 88px);min-height:0;padding:var(--pfx-settings-panel-body-padding, 8px 16px 24px);background:var(--pfx-settings-panel-surface);display:flex;flex-direction:column;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-body>*{min-width:0;max-width:100%}praxis-settings-panel .settings-panel-content{display:block;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-content>*{min-width:0;max-width:100%;box-sizing:border-box}praxis-settings-panel .settings-panel-footer{grid-area:footer;border-top:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);box-shadow:var(--pfx-settings-panel-footer-shadow, var(--md-sys-elevation-level1, 0 -2px 6px rgba(0, 0, 0, .08)));display:flex;align-items:center;flex-wrap:wrap;padding:var(--pfx-settings-panel-footer-padding, 12px 20px);column-gap:var(--pfx-settings-panel-footer-gap, 12px);row-gap:8px;flex-shrink:0;min-width:0;max-width:100%}praxis-settings-panel .spacer{flex:1}praxis-settings-panel .settings-panel-title{display:inline-flex;align-items:center;flex:1 1 auto;gap:var(--pfx-settings-panel-title-gap, 8px);font-weight:700;line-height:1.2;letter-spacing:.2px;margin:0;min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel-title span{min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel-title mat-icon{color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel-title .title-icon{width:20px;height:20px;font-size:20px}praxis-settings-panel .settings-panel-footer button+button{margin-left:var(--pfx-settings-panel-footer-gap, 12px)}praxis-settings-panel .settings-panel-footer button{display:inline-flex;align-items:center}praxis-settings-panel .settings-panel-footer button .mat-icon{flex:0 0 20px;font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}praxis-settings-panel .settings-panel-footer .mat-button-wrapper{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px)}praxis-settings-panel .settings-panel-footer .mat-progress-spinner{margin-right:8px}praxis-settings-panel .settings-panel-footer .mat-flat-button[color=primary]{font-weight:600}praxis-settings-panel .settings-panel .mdc-button__label{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px);line-height:1}praxis-settings-panel .settings-panel .mdc-button__label>span{display:inline-flex;align-items:center;line-height:1}praxis-settings-panel .settings-panel .mdc-button__label .mat-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}@media(max-width:520px){praxis-settings-panel .settings-panel-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;padding:10px 12px;column-gap:8px}praxis-settings-panel .settings-panel-footer .spacer{display:none}praxis-settings-panel .settings-panel-footer button{justify-content:center;width:100%;min-width:0;padding-inline:8px}praxis-settings-panel .settings-panel-action-label{white-space:nowrap}praxis-settings-panel .settings-panel-footer button+button{margin-left:0}}@media(max-width:380px){praxis-settings-panel .settings-panel-footer{grid-template-columns:minmax(0,1fr)}praxis-settings-panel .settings-panel-action-label{white-space:normal;text-align:center}}praxis-settings-panel .settings-panel .mat-divider{background-color:var(--pfx-settings-panel-outline-variant)!important}praxis-settings-panel .settings-panel .mat-expansion-panel{background:var(--pfx-settings-panel-surface-container)!important;border:1px solid var(--pfx-settings-panel-outline-variant);border-radius:var(--md-sys-shape-corner-medium, 12px);box-shadow:var(--md-sys-elevation-level1, 0 2px 8px rgba(0, 0, 0, .08));color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel-header{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-content{color:var(--pfx-settings-panel-on-surface);flex-wrap:wrap;gap:4px 12px;min-width:0;overflow:visible}praxis-settings-panel .settings-panel .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover{background:color-mix(in srgb,var(--pfx-settings-panel-surface-container-high) 84%,var(--pfx-settings-panel-primary) 16%)}praxis-settings-panel .settings-panel .mat-expansion-panel.mat-expanded>.mat-expansion-panel-header{background:var(--pfx-settings-panel-surface-container-high)!important}praxis-settings-panel .settings-panel .mat-expansion-panel-header mat-icon,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-icon{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface);min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface-variant);flex-wrap:wrap;gap:8px}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title>*,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description>*{color:inherit}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title small,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description small{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-indicator,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-indicator:after{color:var(--pfx-settings-panel-on-surface-variant);border-color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-action-row{border-top-color:var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-accordion,praxis-settings-panel .settings-panel .mat-accordion .mat-expansion-panel-spacing{background:transparent!important}praxis-settings-panel .settings-panel .mat-expansion-panel-content,praxis-settings-panel .settings-panel .mat-expansion-panel-content-wrapper,praxis-settings-panel .settings-panel .mat-expansion-panel-body{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-expansion-panel-body{padding:8px}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-expansion-panel-body>*{color:inherit}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header{border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab{min-width:0}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab:hover .mdc-tab__text-label,praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab:focus .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination-chevron{border-color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination:not(.mat-mdc-tab-header-pagination-disabled):hover{background:color-mix(in srgb,var(--pfx-settings-panel-surface-container-high) 84%,var(--pfx-settings-panel-primary) 16%)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab-indicator__content--underline{border-color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel .mat-mdc-card{background:var(--pfx-settings-panel-surface-container-low);border:1px solid var(--pfx-settings-panel-outline-variant);color:var(--pfx-settings-panel-on-surface);box-shadow:var(--md-sys-elevation-level1, 0 2px 8px rgba(0, 0, 0, .08))}praxis-settings-panel .settings-panel .mat-mdc-card-subtitle,praxis-settings-panel .settings-panel .mat-mdc-card-content{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-card-title{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field{width:100%;--mdc-filled-text-field-container-color: var( --pfx-settings-panel-surface-container );--mdc-filled-text-field-hover-container-color: var( --pfx-settings-panel-surface-container-high );--mdc-filled-text-field-focus-container-color: var( --pfx-settings-panel-surface-container-high );--mdc-filled-text-field-active-indicator-color: var( --pfx-settings-panel-outline-variant );--mdc-filled-text-field-hover-active-indicator-color: var( --pfx-settings-panel-secondary );--mdc-filled-text-field-focus-active-indicator-color: var( --pfx-settings-panel-primary );--mdc-filled-text-field-label-text-color: var( --pfx-settings-panel-on-surface-variant );--mdc-filled-text-field-focus-label-text-color: var( --pfx-settings-panel-primary );--mdc-filled-text-field-input-text-color: var( --pfx-settings-panel-on-surface );--mdc-filled-text-field-caret-color: var(--pfx-settings-panel-primary);--mdc-outlined-text-field-outline-color: var( --pfx-settings-panel-outline-variant );--mdc-outlined-text-field-hover-outline-color: var( --pfx-settings-panel-secondary );--mdc-outlined-text-field-focus-outline-color: var( --pfx-settings-panel-primary );--mdc-outlined-text-field-label-text-color: var( --pfx-settings-panel-on-surface-variant );--mdc-outlined-text-field-focus-label-text-color: var( --pfx-settings-panel-primary );--mdc-outlined-text-field-input-text-color: var( --pfx-settings-panel-on-surface );--mdc-outlined-text-field-caret-color: var(--pfx-settings-panel-primary);--mat-form-field-focus-select-arrow-color: var( --pfx-settings-panel-primary );--mat-form-field-enabled-select-arrow-color: var( --pfx-settings-panel-on-surface-variant )}praxis-settings-panel .settings-panel .mdc-text-field--filled{background-color:var(--pfx-settings-panel-surface-container)!important;border-radius:var(--md-sys-shape-corner-small, 8px) var(--md-sys-shape-corner-small, 8px) 0 0}praxis-settings-panel .settings-panel .mat-mdc-text-field-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-flex,praxis-settings-panel .settings-panel .mat-mdc-form-field-infix,praxis-settings-panel .settings-panel .mat-mdc-form-field-focus-overlay{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field-focus-overlay{opacity:0}praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-floating-label,praxis-settings-panel .settings-panel .mat-mdc-select-value,praxis-settings-panel .settings-panel .mat-mdc-select-arrow,praxis-settings-panel .settings-panel .mat-mdc-form-field .mat-mdc-floating-label{color:var(--pfx-settings-panel-on-surface-variant)!important}praxis-settings-panel .settings-panel .mdc-text-field--filled.mdc-text-field--focused .mdc-floating-label,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field input,praxis-settings-panel .settings-panel .mat-mdc-form-field textarea,praxis-settings-panel .settings-panel .mat-mdc-form-field .mdc-text-field__input{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field-subscript-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-hint-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-error-wrapper,praxis-settings-panel .settings-panel .mat-mdc-hint{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-button-toggle-group{border-color:var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-button-toggle{background:var(--pfx-settings-panel-surface-container-low);color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-button-toggle+.mat-button-toggle{border-left-color:var(--pfx-settings-panel-outline-variant)}praxis-settings-panel .settings-panel .mat-button-toggle-checked{background:var(--pfx-settings-panel-primary-container)!important;color:var(--pfx-settings-panel-on-primary-container)!important}praxis-settings-panel .settings-panel .mat-button-toggle .mat-icon,praxis-settings-panel .settings-panel .mat-button-toggle-checked .mat-icon{color:inherit}praxis-settings-panel .settings-panel .mat-mdc-slide-toggle .mdc-label{color:var(--pfx-settings-panel-on-surface)}.settings-panel{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%}.settings-panel-body{overflow-x:hidden;min-width:0}.settings-panel-body>*{min-width:0;max-width:100%}.praxis-settings-panel-backdrop{background:var(--pfx-backdrop, rgba(8, 15, 26, .42));backdrop-filter:blur(var(--pfx-backdrop-blur, 6px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 6px)) saturate(110%)}.praxis-settings-panel-pane{position:fixed!important;top:0!important;right:0!important;display:flex!important;align-items:stretch!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;z-index:var(--praxis-layer-settings-panel, 1220)!important;transition:width var(--pfx-side-panel-motion-duration-enter, .3s) var(--pfx-side-panel-motion-easing-enter, ease)}.praxis-settings-panel-pane .settings-panel{pointer-events:auto}@media(prefers-reduced-motion:reduce){.praxis-settings-panel-pane{transition:none}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i0.ElementRef }, { type: i1$1.OverlayContainer }], propDecorators: { contentHost: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [providePraxisSettingsPanelI18n()], template: "<div\n  class=\"settings-panel\"\n  data-testid=\"settings-panel-root\"\n  [class.expanded]=\"expanded\"\n  [class.settings-panel--preview]=\"previewing\"\n  [class.is-resizable]=\"showResizeHandle\"\n  [ngStyle]=\"panelInlineStyles\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"interactionActive ? 'true' : null\"\n  [attr.aria-hidden]=\"interactionActive ? null : 'true'\"\n  [attr.inert]=\"interactionActive ? null : ''\"\n  [attr.aria-labelledby]=\"previewing ? titleId + '-preview' : titleId\"\n  [cdkTrapFocus]=\"interactionActive\"\n  [cdkTrapFocusAutoCapture]=\"true\"\n  >\n  @if (showResizeHandle && !previewing) {\n    <div\n      class=\"settings-panel__resize-handle\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-orientation=\"vertical\"\n      [attr.aria-label]=\"resizeHandleLabel\"\n      (pointerdown)=\"onResizeHandlePointerDown($event)\"\n      (keydown)=\"onResizeHandleKeydown($event)\"\n    ></div>\n  }\n  @if (previewing) {\n    <section class=\"settings-panel-preview-bar\" data-testid=\"settings-panel-preview-bar\">\n      <div><strong [id]=\"titleId + '-preview'\">{{ tx('Page preview') }}</strong><p>{{ tx('Inspect the result. Return to keep editing; nothing is saved here.') }}</p></div>\n      <button mat-flat-button type=\"button\" data-testid=\"settings-panel-return\" (click)=\"returnFromPreview()\">{{ tx('Back to settings') }}</button>\n    </section>\n  }\n  <header class=\"settings-panel-header\" [hidden]=\"previewing\">\n    <h2 class=\"settings-panel-title\" [id]=\"titleId\">\n      @if (titleIcon) {\n        <mat-icon class=\"title-icon\" [praxisIcon]=\"titleIcon\"></mat-icon>\n      }\n      <span>{{ title }}</span>\n    </h2>\n    <span class=\"spacer\"></span>\n    @if (previewTarget) {\n      <button mat-stroked-button type=\"button\" data-testid=\"settings-panel-preview\" [disabled]=\"!canInspectPreview\" (click)=\"showPreview()\">\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'visibility'\"></mat-icon>{{ tx('View result') }}\n      </button>\n    }\n    <button\n      [praxisIconButton]=\"expanded ? 'close_fullscreen' : 'open_in_full'\"\n      size=\"compact\"\n      type=\"button\"\n      data-testid=\"settings-panel-toggle-expand\"\n      [attr.aria-label]=\"expanded ? tx('Collapse panel') : tx('Expand panel')\"\n      [attr.aria-expanded]=\"expanded\"\n      [matTooltip]=\"expanded ? tx('Collapse panel') : tx('Expand panel')\"\n      (click)=\"toggleExpand()\"\n    ></button>\n    <button\n      praxisIconButton=\"close\"\n      size=\"compact\"\n      type=\"button\"\n      data-testid=\"settings-panel-close-icon\"\n      [attr.aria-label]=\"tx('Close')\"\n      [matTooltip]=\"tx('Close')\"\n      (click)=\"onCancel()\"\n    ></button>\n  </header>\n  @if (showStatusMessage && !previewing) {\n    <div\n      class=\"settings-panel-status\"\n      [attr.data-status]=\"statusTone\"\n      role=\"status\"\n      aria-live=\"polite\"\n      >\n      <mat-icon\n        aria-hidden=\"true\"\n        [praxisIcon]=\"\n          statusTone === 'dirty' || statusTone === 'invalid'\n            ? 'warning'\n            : statusTone === 'saved'\n              ? 'check_circle'\n              : statusTone === 'busy'\n                ? 'autorenew'\n                : 'info'\n        \"\n      ></mat-icon>\n      <span>{{ statusMessage }}</span>\n    </div>\n  }\n  <div class=\"settings-panel-body\" [hidden]=\"previewing\">\n    <ng-template #contentHost></ng-template>\n  </div>\n  <footer class=\"settings-panel-footer\" [hidden]=\"previewing\">\n    <button\n      mat-button\n      type=\"button\"\n      data-testid=\"settings-panel-reset\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onReset()\"\n      [disabled]=\"isBusy\"\n      >\n      <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'restart_alt'\"></mat-icon>\n      <span>{{ tx('Reset') }}</span>\n    </button>\n    <span class=\"spacer\"></span>\n    <button\n      mat-button\n      type=\"button\"\n      data-testid=\"settings-panel-cancel\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onCancel()\"\n      [disabled]=\"isBusy\"\n      >\n      <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'close'\"></mat-icon>\n      <span>{{ tx('Cancel') }}</span>\n    </button>\n    <button\n      mat-stroked-button\n      type=\"button\"\n      data-testid=\"settings-panel-apply\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onApply()\"\n      [disabled]=\"!canApply\"\n      [matTooltip]=\"applySaveDisabledReason\"\n      [matTooltipDisabled]=\"canApply || !diagnostics.showDisabledReason\"\n      [attr.aria-busy]=\"isBusy\"\n      [attr.aria-label]=\"applyActionLabel || 'Apply'\"\n      >\n      @if (showBusyIndicator) {\n        <mat-progress-spinner\n          mode=\"indeterminate\"\n          diameter=\"20\"\n        ></mat-progress-spinner>\n      }\n      @if (!showBusyIndicator) {\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'done'\"></mat-icon>\n        <span class=\"settings-panel-action-label settings-panel-action-label--apply\">{{ applyActionLabel }}</span>\n      }\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      type=\"button\"\n      data-testid=\"settings-panel-save\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation(); onSave()\"\n      [disabled]=\"!canSave\"\n      [matTooltip]=\"applySaveDisabledReason\"\n      [matTooltipDisabled]=\"canSave || !diagnostics.showDisabledReason\"\n      [attr.aria-busy]=\"isBusy\"\n      [attr.aria-label]=\"saveActionLabel || 'Save & Close'\"\n      >\n      @if (showBusyIndicator) {\n        <mat-progress-spinner\n          mode=\"indeterminate\"\n          diameter=\"20\"\n        ></mat-progress-spinner>\n      }\n      @if (!showBusyIndicator) {\n        <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'save'\"></mat-icon>\n        <span class=\"settings-panel-action-label settings-panel-action-label--save\">{{ saveActionLabel }}</span>\n      }\n    </button>\n  </footer>\n</div>\n", styles: ["@charset \"UTF-8\";praxis-settings-panel{display:block;height:100%;width:100%;min-width:0;flex:1 1 auto;box-sizing:border-box}praxis-settings-panel .settings-panel{position:relative;container:settings-panel-shell/inline-size;--pfx-settings-panel-surface-container: var( --md-sys-color-surface-container, #ffffff );--pfx-settings-panel-surface-container-high: var( --md-sys-color-surface-container-high, #f7f7f7 );--pfx-settings-panel-surface-container-low: var( --md-sys-color-surface-container-low, #f2f4f7 );--pfx-settings-panel-surface: var(--md-sys-color-surface, #ffffff);--pfx-settings-panel-on-surface: var(--md-sys-color-on-surface, #111827);--pfx-settings-panel-on-surface-variant: var( --md-sys-color-on-surface-variant, rgba(17, 24, 39, .72) );--pfx-settings-panel-outline: var( --md-sys-color-outline, rgba(15, 23, 42, .24) );--pfx-settings-panel-outline-variant: var( --md-sys-color-outline-variant, rgba(15, 23, 42, .12) );--pfx-settings-panel-primary: var(--md-sys-color-primary, #2563eb);--pfx-settings-panel-primary-container: var( --md-sys-color-primary-container, rgba(37, 99, 235, .14) );--pfx-settings-panel-on-primary-container: var( --md-sys-color-on-primary-container, #0f172a );--pfx-settings-panel-secondary: var( --md-sys-color-secondary, var(--pfx-settings-panel-primary) );--pfx-settings-panel-error: var(--md-sys-color-error, #b3261e);--pfx-settings-panel-error-container: var( --md-sys-color-error-container, rgba(179, 38, 30, .14) );display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:\"header\" \"status\" \"body\" \"footer\";height:100%;background:var(--pfx-settings-panel-surface-container);color:var(--pfx-settings-panel-on-surface);border-left:1px solid var(--pfx-settings-panel-outline-variant);width:100%;max-width:100%;min-width:0;box-sizing:border-box;box-shadow:var(--pfx-settings-panel-elevation, var(--md-sys-elevation-level2, 0 8px 24px rgba(0, 0, 0, .16)));overflow:hidden}praxis-settings-panel .settings-panel__resize-handle{position:absolute;inset:0 auto 0 0;width:12px;cursor:col-resize;touch-action:none;z-index:3;outline:none}praxis-settings-panel .settings-panel__resize-handle:before{content:\"\";position:absolute;inset:0 auto 0 4px;width:2px;background:transparent;transition:background-color var(--pfx-side-panel-motion-duration, .16s) ease,opacity var(--pfx-side-panel-motion-duration, .16s) ease;opacity:0}praxis-settings-panel .settings-panel.is-resizable:hover .settings-panel__resize-handle:before,praxis-settings-panel .settings-panel__resize-handle:focus-visible:before{opacity:1;background:var(--pfx-settings-panel-outline)}praxis-settings-panel .settings-panel-header{grid-area:header;display:flex;align-items:center;gap:var(--pfx-settings-panel-header-gap, 8px);padding:12px var(--pfx-settings-panel-header-padding-x, 20px);min-height:var(--pfx-settings-panel-header-height, 64px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);box-shadow:var(--pfx-settings-panel-header-shadow, var(--md-sys-elevation-level1, 0 2px 6px rgba(0, 0, 0, .08)));flex-shrink:0;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-header .spacer{flex:1 1 auto;min-width:0}praxis-settings-panel .settings-panel-status{grid-area:status;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px var(--pfx-settings-panel-status-padding-x, 20px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);color:var(--pfx-settings-panel-on-surface);font-size:.85rem;font-weight:500;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-status mat-icon{width:18px;height:18px;font-size:18px}praxis-settings-panel .settings-panel-status[data-status=dirty],praxis-settings-panel .settings-panel-status[data-status=invalid]{color:var(--pfx-settings-panel-error);background:color-mix(in srgb,var(--pfx-settings-panel-error-container) 30%,var(--pfx-settings-panel-surface-container-high))}praxis-settings-panel .settings-panel-status[data-status=saved]{color:var(--pfx-settings-panel-primary);background:color-mix(in srgb,var(--pfx-settings-panel-primary-container) 28%,var(--pfx-settings-panel-surface-container-high))}praxis-settings-panel .settings-panel-body{grid-area:body;overflow-y:auto;overflow-x:hidden;scroll-padding-top:var(--pfx-settings-panel-scroll-padding-start, 16px);scroll-padding-bottom:var(--pfx-settings-panel-scroll-padding-end, 88px);min-height:0;padding:var(--pfx-settings-panel-body-padding, 8px 16px 24px);background:var(--pfx-settings-panel-surface);display:flex;flex-direction:column;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-body>*{min-width:0;max-width:100%}praxis-settings-panel .settings-panel-content{display:block;min-width:0;max-width:100%}praxis-settings-panel .settings-panel-content>*{min-width:0;max-width:100%;box-sizing:border-box}praxis-settings-panel .settings-panel-footer{grid-area:footer;border-top:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-high);box-shadow:var(--pfx-settings-panel-footer-shadow, var(--md-sys-elevation-level1, 0 -2px 6px rgba(0, 0, 0, .08)));display:flex;align-items:center;flex-wrap:wrap;padding:var(--pfx-settings-panel-footer-padding, 12px 20px);column-gap:var(--pfx-settings-panel-footer-gap, 12px);row-gap:8px;flex-shrink:0;min-width:0;max-width:100%}praxis-settings-panel .spacer{flex:1}praxis-settings-panel .settings-panel-title{display:inline-flex;align-items:center;flex:1 1 auto;gap:var(--pfx-settings-panel-title-gap, 8px);font-weight:700;line-height:1.2;letter-spacing:.2px;margin:0;min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel-title span{min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel-title mat-icon{color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel-title .title-icon{width:20px;height:20px;font-size:20px}praxis-settings-panel .settings-panel-footer button{display:inline-flex;align-items:center}praxis-settings-panel .settings-panel-footer button .mat-icon{flex:0 0 20px;font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}praxis-settings-panel .settings-panel-footer .mat-button-wrapper{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px)}praxis-settings-panel .settings-panel-footer .mat-progress-spinner{margin-right:8px}praxis-settings-panel .settings-panel-footer .mat-flat-button[color=primary]{font-weight:600}praxis-settings-panel .settings-panel-footer .mdc-button__label{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px);line-height:1}praxis-settings-panel .settings-panel-footer .mdc-button__label>span{display:inline-flex;align-items:center;line-height:1}praxis-settings-panel .settings-panel-footer .mdc-button__label .mat-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}@container settings-panel-shell (max-width: 520px){praxis-settings-panel .settings-panel-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;padding:10px 12px;column-gap:8px}praxis-settings-panel .settings-panel-footer .spacer{display:none}praxis-settings-panel .settings-panel-footer button{justify-content:center;width:100%;min-width:0;min-height:44px;height:auto;padding:8px}praxis-settings-panel .settings-panel-action-label{white-space:normal;overflow-wrap:anywhere;text-align:center}praxis-settings-panel .settings-panel-footer .mdc-button__label{min-width:0;max-width:100%}praxis-settings-panel .settings-panel-footer .mdc-button__label>span{min-width:0;line-height:1.25}}@container settings-panel-shell (max-width: 280px){praxis-settings-panel .settings-panel-footer{grid-template-columns:minmax(0,1fr)}}praxis-settings-panel .settings-panel .mat-divider{background-color:var(--pfx-settings-panel-outline-variant)!important}praxis-settings-panel .settings-panel .mat-expansion-panel{background:var(--pfx-settings-panel-surface-container)!important;border:1px solid var(--pfx-settings-panel-outline-variant);border-radius:var(--md-sys-shape-corner-medium, 12px);box-shadow:var(--md-sys-elevation-level1, 0 2px 8px rgba(0, 0, 0, .08));color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel-header{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-content{color:var(--pfx-settings-panel-on-surface);flex-wrap:wrap;gap:4px 12px;min-width:0;overflow:visible}praxis-settings-panel .settings-panel .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover{background:color-mix(in srgb,var(--pfx-settings-panel-surface-container-high) 84%,var(--pfx-settings-panel-primary) 16%)}praxis-settings-panel .settings-panel .mat-expansion-panel.mat-expanded>.mat-expansion-panel-header{background:var(--pfx-settings-panel-surface-container-high)!important}praxis-settings-panel .settings-panel .mat-expansion-panel-header mat-icon,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-icon{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface);min-width:0;overflow:visible;white-space:normal}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface-variant);flex-wrap:wrap;gap:8px}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title>*,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description>*{color:inherit}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-title small,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description small{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-indicator,praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-indicator:after{color:var(--pfx-settings-panel-on-surface-variant);border-color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-action-row{border-top-color:var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-accordion,praxis-settings-panel .settings-panel .mat-accordion .mat-expansion-panel-spacing{background:transparent!important}praxis-settings-panel .settings-panel .mat-expansion-panel-content,praxis-settings-panel .settings-panel .mat-expansion-panel-content-wrapper,praxis-settings-panel .settings-panel .mat-expansion-panel-body{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-expansion-panel-body{padding:8px}praxis-settings-panel .settings-panel .mat-expansion-panel .mat-expansion-panel-body>*{color:inherit}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header{border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab{min-width:0}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab:hover .mdc-tab__text-label,praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab:focus .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination-chevron{border-color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mat-mdc-tab-header-pagination:not(.mat-mdc-tab-header-pagination-disabled):hover{background:color-mix(in srgb,var(--pfx-settings-panel-surface-container-high) 84%,var(--pfx-settings-panel-primary) 16%)}praxis-settings-panel .settings-panel .mat-mdc-tab-group .mdc-tab-indicator__content--underline{border-color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel .mat-mdc-card{background:var(--pfx-settings-panel-surface-container-low);border:1px solid var(--pfx-settings-panel-outline-variant);color:var(--pfx-settings-panel-on-surface);box-shadow:var(--md-sys-elevation-level1, 0 2px 8px rgba(0, 0, 0, .08))}praxis-settings-panel .settings-panel .mat-mdc-card-subtitle,praxis-settings-panel .settings-panel .mat-mdc-card-content{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-card-title{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field{width:100%;--mdc-filled-text-field-container-color: var( --pfx-settings-panel-surface-container );--mdc-filled-text-field-hover-container-color: var( --pfx-settings-panel-surface-container-high );--mdc-filled-text-field-focus-container-color: var( --pfx-settings-panel-surface-container-high );--mdc-filled-text-field-active-indicator-color: var( --pfx-settings-panel-outline-variant );--mdc-filled-text-field-hover-active-indicator-color: var( --pfx-settings-panel-secondary );--mdc-filled-text-field-focus-active-indicator-color: var( --pfx-settings-panel-primary );--mdc-filled-text-field-label-text-color: var( --pfx-settings-panel-on-surface-variant );--mdc-filled-text-field-focus-label-text-color: var( --pfx-settings-panel-primary );--mdc-filled-text-field-input-text-color: var( --pfx-settings-panel-on-surface );--mdc-filled-text-field-caret-color: var(--pfx-settings-panel-primary);--mdc-outlined-text-field-outline-color: var( --pfx-settings-panel-outline-variant );--mdc-outlined-text-field-hover-outline-color: var( --pfx-settings-panel-secondary );--mdc-outlined-text-field-focus-outline-color: var( --pfx-settings-panel-primary );--mdc-outlined-text-field-label-text-color: var( --pfx-settings-panel-on-surface-variant );--mdc-outlined-text-field-focus-label-text-color: var( --pfx-settings-panel-primary );--mdc-outlined-text-field-input-text-color: var( --pfx-settings-panel-on-surface );--mdc-outlined-text-field-caret-color: var(--pfx-settings-panel-primary);--mat-form-field-focus-select-arrow-color: var( --pfx-settings-panel-primary );--mat-form-field-enabled-select-arrow-color: var( --pfx-settings-panel-on-surface-variant )}praxis-settings-panel .settings-panel .mdc-text-field--filled{background-color:var(--pfx-settings-panel-surface-container)!important;border-radius:var(--md-sys-shape-corner-small, 8px) var(--md-sys-shape-corner-small, 8px) 0 0}praxis-settings-panel .settings-panel .mat-mdc-text-field-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-flex,praxis-settings-panel .settings-panel .mat-mdc-form-field-infix,praxis-settings-panel .settings-panel .mat-mdc-form-field-focus-overlay{background:var(--pfx-settings-panel-surface-container)!important;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field-focus-overlay{opacity:0}praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-floating-label,praxis-settings-panel .settings-panel .mat-mdc-select-value,praxis-settings-panel .settings-panel .mat-mdc-select-arrow,praxis-settings-panel .settings-panel .mat-mdc-form-field .mat-mdc-floating-label{color:var(--pfx-settings-panel-on-surface-variant)!important}praxis-settings-panel .settings-panel .mdc-text-field--filled.mdc-text-field--focused .mdc-floating-label,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field input,praxis-settings-panel .settings-panel .mat-mdc-form-field textarea,praxis-settings-panel .settings-panel .mat-mdc-form-field .mdc-text-field__input{color:var(--pfx-settings-panel-on-surface)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field-subscript-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-hint-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-error-wrapper,praxis-settings-panel .settings-panel .mat-mdc-hint{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-button-toggle-group{border-color:var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .mat-button-toggle{background:var(--pfx-settings-panel-surface-container-low);color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-button-toggle+.mat-button-toggle{border-left-color:var(--pfx-settings-panel-outline-variant)}praxis-settings-panel .settings-panel .mat-button-toggle-checked{background:var(--pfx-settings-panel-primary-container)!important;color:var(--pfx-settings-panel-on-primary-container)!important}praxis-settings-panel .settings-panel .mat-button-toggle .mat-icon,praxis-settings-panel .settings-panel .mat-button-toggle-checked .mat-icon{color:inherit}praxis-settings-panel .settings-panel .mat-mdc-slide-toggle .mdc-label{color:var(--pfx-settings-panel-on-surface)}.settings-panel{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%}.settings-panel-body{overflow-x:hidden;min-width:0}.settings-panel-body>*{min-width:0;max-width:100%}.praxis-settings-panel-backdrop{background:var(--pfx-backdrop, rgba(8, 15, 26, .42));backdrop-filter:blur(var(--pfx-backdrop-blur, 6px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 6px)) saturate(110%)}.praxis-settings-panel-pane{position:fixed!important;top:0!important;right:0!important;display:flex!important;align-items:stretch!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;z-index:var(--praxis-layer-settings-panel, 1220)!important;transition:width var(--pfx-side-panel-motion-duration-enter, .3s) var(--pfx-side-panel-motion-easing-enter, ease)}.praxis-settings-panel-pane .settings-panel{pointer-events:auto}@media(prefers-reduced-motion:reduce){.praxis-settings-panel-pane{transition:none}}.praxis-settings-panel-pane.praxis-settings-panel-pane--preview{top:auto!important;bottom:12px!important;right:12px!important;height:auto!important;width:min(560px,100vw - 24px)!important;min-width:0!important;transition:none}.praxis-settings-panel-backdrop.praxis-settings-panel-backdrop--preview{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.praxis-settings-preview-target{outline:2px solid var(--md-sys-color-primary);outline-offset:3px}praxis-settings-panel .settings-panel [hidden]{display:none!important}praxis-settings-panel .settings-panel--preview{height:auto;min-height:0;grid-template-rows:auto;border-radius:16px}praxis-settings-panel .settings-panel-preview-bar{display:flex;align-items:center;gap:16px;padding:16px;color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel-preview-bar p{margin:4px 0 0;color:var(--pfx-settings-panel-on-surface-variant);font-size:.875rem}praxis-settings-panel .settings-panel-preview-bar button{flex-shrink:0}@container settings-panel-shell (max-width: 599px){praxis-settings-panel .settings-panel-header:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start}praxis-settings-panel .settings-panel-header .spacer{display:none}praxis-settings-panel .settings-panel-header .settings-panel-title{grid-column:1;grid-row:1;overflow-wrap:anywhere}praxis-settings-panel .settings-panel-header [data-testid=settings-panel-toggle-expand]{grid-column:2;grid-row:1}praxis-settings-panel .settings-panel-header [data-testid=settings-panel-close-icon]{grid-column:3;grid-row:1}praxis-settings-panel .settings-panel-header [data-testid=settings-panel-preview]{grid-column:1/-1;grid-row:2;justify-self:start;max-width:100%}praxis-settings-panel .settings-panel-preview-bar{flex-direction:column;align-items:stretch;gap:8px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i0.ElementRef }, { type: i1$1.OverlayContainer }], propDecorators: { focusTrap: [{
+                type: ViewChild,
+                args: [CdkTrapFocus]
+            }], contentHost: [{
                 type: ViewChild,
                 args: ['contentHost', { read: ViewContainerRef, static: true }]
             }], handleKeydown: [{
@@ -1109,6 +1221,11 @@ class SettingsPanelRef {
             this.sizeChangedSubject.next({ width: serialized });
         }
     }
+    /** Temporary presentation only: does not save or overwrite persisted panel width. */
+    setPreviewing(previewing) {
+        this.overlayRef.overlayElement.classList.toggle('praxis-settings-panel-pane--preview', previewing);
+        this.overlayRef.backdropElement?.classList.toggle('praxis-settings-panel-backdrop--preview', previewing);
+    }
     close(reason = 'cancel') {
         if (!this.overlayRef?.hasAttached()) {
             return;
@@ -1162,6 +1279,9 @@ class DeferredSettingsPanelRef {
         this.target?.reset();
     }
     bindSizePersistor(_fn) { }
+    setPreviewing(previewing) {
+        this.target?.setPreviewing(previewing);
+    }
     updateSize(width, options) {
         this.target?.updateSize(width, options);
     }
@@ -1590,16 +1710,16 @@ class BaseSidePanelService {
         if (options.config.closeOnBackdrop !== false) {
             overlayRef.backdropClick().subscribe(() => options.onBackdrop(ref));
         }
-        if (options.config.closeOnEsc !== false) {
-            overlayRef.keydownEvents().subscribe((event) => {
-                if (event.key === 'Escape') {
-                    if (this.shouldDeferEscape(event, overlayRef)) {
-                        return;
-                    }
-                    options.onEsc(ref);
+        // Keep this pane in CDK keyboard arbitration even when its content mediates
+        // Escape. Otherwise CDK dispatches to an older menu during its exit animation.
+        overlayRef.keydownEvents().subscribe((event) => {
+            if (options.config.closeOnEsc !== false && event.key === 'Escape') {
+                if (this.shouldDeferEscape(event, overlayRef)) {
+                    return;
                 }
-            });
-        }
+                options.onEsc(ref);
+            }
+        });
         this.trackCurrentRef(scope, ref, options.createCloser(ref));
         return ref;
     }
@@ -1721,6 +1841,9 @@ class SettingsPanelService {
     currentScope;
     currentContentParentInjector;
     childSequence = 0;
+    openingRevision = 0;
+    closedPanels = new WeakSet();
+    panelParents = new WeakMap();
     i18n = inject(PraxisI18nService);
     layerScale = inject(PraxisLayerScaleStyleService);
     constructor(baseSidePanelService, injector) {
@@ -1729,24 +1852,57 @@ class SettingsPanelService {
     }
     /**
      * Opens a new settings panel. If another panel is already open it will be
-     * closed before the new one is created. Future improvements may reuse the
-     * same overlay when the provided id matches.
+     * mediated before the new content is created. Replacing a child preserves
+     * its parent and overlay scope.
      */
     open(config, contentParentInjector = this.injector) {
+        if (config.owner?.destroyed)
+            return this.cancelledOpen();
         if (this.currentRef && this.currentPanelInstance) {
             const deferredRef = new DeferredSettingsPanelRef();
+            const unregisterOwner = config.owner?.onDestroy(() => deferredRef.close('cancel'));
+            deferredRef.closed$.pipe(take(1)).subscribe(() => unregisterOwner?.());
             const currentRef = this.currentRef;
             const currentPanelInstance = this.currentPanelInstance;
+            const replacementScope = this.currentScope;
+            const replacementParent = this.panelParents.get(currentRef);
+            const currentClosed = currentRef.closed$
+                .pipe(take(1), takeUntil(deferredRef.closed$))
+                .subscribe(() => deferredRef.close('cancel'));
             currentPanelInstance
                 .requestClose('cancel')
-                .pipe(take(1))
+                .pipe(take(1), takeUntil(deferredRef.closed$))
                 .subscribe((allowed) => {
+                if (config.owner?.destroyed || this.currentRef !== currentRef) {
+                    deferredRef.close('cancel');
+                    return;
+                }
                 if (!allowed) {
                     deferredRef.close('cancel');
                     return;
                 }
+                // Closing the panel is now part of this accepted replacement.
+                currentClosed.unsubscribe();
+                const openingRevision = this.openingRevision;
                 currentRef.close('cancel');
-                deferredRef.resolve(this.openFresh(config, contentParentInjector));
+                // closed$ callbacks can open another editor or destroy this requester.
+                if (config.owner?.destroyed || this.openingRevision !== openingRevision) {
+                    deferredRef.close('cancel');
+                    return;
+                }
+                if (replacementParent && this.closedPanels.has(replacementParent.ref)) {
+                    deferredRef.close('cancel');
+                    return;
+                }
+                replacementParent?.panel.setInteractionActive(false);
+                try {
+                    deferredRef.resolve(this.openFresh(config, contentParentInjector, replacementScope, replacementParent));
+                }
+                catch (error) {
+                    replacementParent?.panel.setInteractionActive(true);
+                    deferredRef.close('cancel');
+                    throw error;
+                }
             });
             return deferredRef;
         }
@@ -1758,6 +1914,8 @@ class SettingsPanelService {
      */
     openChild(config, contentParentInjector = this.currentContentParentInjector ??
         this.injector) {
+        if (config.owner?.destroyed)
+            return this.cancelledOpen();
         if (!this.currentRef || !this.currentPanelInstance) {
             return this.openFresh(config, contentParentInjector);
         }
@@ -1778,6 +1936,18 @@ class SettingsPanelService {
         }
     }
     openFresh(config, contentParentInjector, scope = 'settings-panel', parent) {
+        if (config.owner?.destroyed)
+            return this.cancelledOpen();
+        const openingRevision = ++this.openingRevision;
+        const inputs = typeof config.content.inputs === 'function'
+            ? config.content.inputs()
+            : config.content.inputs;
+        if (config.owner?.destroyed || this.openingRevision !== openingRevision ||
+            (parent && this.closedPanels.has(parent.ref))) {
+            if (parent && this.currentRef === parent.ref)
+                parent.panel.setInteractionActive(true);
+            return this.cancelledOpen();
+        }
         this.layerScale.ensureInstalled();
         const ref = this.baseSidePanelService.openHost({
             component: SettingsPanelComponent,
@@ -1794,10 +1964,11 @@ class SettingsPanelService {
                 maxWidth: config.maxWidth,
                 content: {
                     component: config.content.component,
-                    inputs: config.content.inputs,
+                    inputs,
                 },
                 closeOnBackdrop: true,
-                closeOnEsc: true,
+                // The component mediates Escape, including temporary result inspection.
+                closeOnEsc: false,
             },
             backdropClass: 'praxis-settings-panel-backdrop',
             panelClass: 'praxis-settings-panel-pane',
@@ -1823,10 +1994,10 @@ class SettingsPanelService {
                     expanded: config.expanded || false,
                 });
                 panelRef.instance.configureDiagnostics(config.diagnostics);
+                panelRef.instance.previewTarget = config.previewTarget;
                 this.currentPanelInstance = panelRef.instance;
                 this.currentScope = scope;
                 this.currentContentParentInjector = contentParentInjector;
-                const inputs = config.content.inputs;
                 const injector = Injector.create({
                     providers: [
                         { provide: SETTINGS_PANEL_DATA, useValue: inputs },
@@ -1838,19 +2009,50 @@ class SettingsPanelService {
                 panelRef.changeDetectorRef.detectChanges();
             },
             createCloser: (panelServiceRef) => () => panelServiceRef.close('cancel'),
-            onBackdrop: (panelServiceRef) => panelServiceRef.close('backdrop'),
+            onBackdrop: (panelServiceRef) => {
+                if (this.currentRef !== panelServiceRef)
+                    return;
+                this.currentPanelInstance?.requestClose('backdrop')
+                    .pipe(take(1), takeUntil(panelServiceRef.closed$)).subscribe(allowed => {
+                    if (allowed && this.currentRef === panelServiceRef)
+                        panelServiceRef.close('backdrop');
+                });
+            },
             onEsc: (panelServiceRef) => panelServiceRef.close('esc'),
         });
+        if (parent)
+            this.panelParents.set(ref, parent);
         ref.closed$.subscribe(() => {
+            this.closedPanels.add(ref);
             if (this.currentRef === ref) {
-                this.currentRef = parent?.ref;
-                this.currentPanelInstance = parent?.panel;
-                this.currentScope = parent?.scope;
-                this.currentContentParentInjector = parent?.contentParentInjector;
-                parent?.panel.setInteractionActive(true);
+                let ancestor = parent;
+                while (ancestor && this.closedPanels.has(ancestor.ref)) {
+                    ancestor = this.panelParents.get(ancestor.ref);
+                }
+                this.currentRef = ancestor?.ref;
+                this.currentPanelInstance = ancestor?.panel;
+                this.currentScope = ancestor?.scope;
+                this.currentContentParentInjector = ancestor?.contentParentInjector;
+                ancestor?.panel.setInteractionActive(true);
             }
         });
         this.currentRef = ref;
+        if (parent) {
+            parent.ref.closed$.pipe(take(1), takeUntil(ref.closed$))
+                .subscribe(() => ref.close('cancel'));
+        }
+        if (config.owner?.destroyed || (parent && this.closedPanels.has(parent.ref))) {
+            ref.close('cancel');
+        }
+        else if (config.owner) {
+            const unregisterOwner = config.owner.onDestroy(() => ref.close('cancel'));
+            ref.closed$.pipe(take(1)).subscribe(() => unregisterOwner());
+        }
+        return ref;
+    }
+    cancelledOpen() {
+        const ref = new DeferredSettingsPanelRef();
+        ref.close('cancel');
         return ref;
     }
     close(reason = 'cancel') {
@@ -1872,8 +2074,10 @@ function providePraxisSettingsPanelBridge() {
             useFactory: (service, injector) => ({
                 open: (opts) => service.open({
                     id: opts.id,
+                    owner: opts.owner,
                     title: opts.title,
                     titleIcon: opts.titleIcon,
+                    previewTarget: opts.previewTarget,
                     content: {
                         component: opts.content.component,
                         inputs: (opts.content.inputs || undefined),
@@ -5313,7 +5517,7 @@ const PRAXIS_SETTINGS_PANEL_AUTHORING_MANIFEST = {
                         identityKeys: ['config.id', 'provider.onSave'],
                         inputSchema: behaviorSchema,
                         failureModes: ['save-while-invalid', 'save-while-busy', 'save-result-undefined', 'provider-save-rejected'],
-                        description: 'Keeps Save gated by dirty, valid and busy state, prefers onSave when present, falls back to getSettingsValue and closes with reason save.',
+                        description: 'Save requires a dirty draft or changes already applied in the open panel, plus valid and non-busy state. It obtains a fresh value through onSave or getSettingsValue and closes with reason save; it never replays a cached Apply payload.',
                     } }],
             validators: ['save-prefers-provider-hook', 'save-fallback-value-preserved', 'save-closes-with-save-reason', 'dirty-valid-busy-gates-preserved'],
             affectedPaths: ['provider.onSave', 'provider.getSettingsValue', 'ref.saved$', 'ref.closed$'],
@@ -5420,7 +5624,7 @@ const PRAXIS_SETTINGS_PANEL_AUTHORING_MANIFEST = {
         { validatorId: 'resize-persistence-explicit', level: 'error', code: 'SETTINGS_PANEL_RESIZE_PERSISTENCE_EXPLICIT', description: 'Persisted resize must use a stable persistSizeKey or be explicitly transient.' },
         { validatorId: 'apply-requires-provider-value', level: 'error', code: 'SETTINGS_PANEL_APPLY_REQUIRES_PROVIDER_VALUE', description: 'Apply must obtain payloads from SettingsValueProvider.getSettingsValue().' },
         { validatorId: 'apply-does-not-close-panel', level: 'error', code: 'SETTINGS_PANEL_APPLY_DOES_NOT_CLOSE', description: 'Apply emits preview payloads without closing the panel.' },
-        { validatorId: 'dirty-valid-busy-gates-preserved', level: 'error', code: 'SETTINGS_PANEL_STATE_GATES_PRESERVED', description: 'Apply and Save remain gated by dirty, valid and busy state.' },
+        { validatorId: 'dirty-valid-busy-gates-preserved', level: 'error', code: 'SETTINGS_PANEL_STATE_GATES_PRESERVED', description: 'Apply requires dirty, valid and non-busy state. Save also accepts changes already applied in the open panel when the draft is clean; validity and non-busy state remain mandatory.' },
         { validatorId: 'save-prefers-provider-hook', level: 'error', code: 'SETTINGS_PANEL_SAVE_PREFERS_PROVIDER_HOOK', description: 'Save must call onSave when provided before falling back to getSettingsValue().' },
         { validatorId: 'save-fallback-value-preserved', level: 'error', code: 'SETTINGS_PANEL_SAVE_FALLBACK_PRESERVED', description: 'Save fallback must preserve getSettingsValue payload semantics.' },
         { validatorId: 'save-closes-with-save-reason', level: 'error', code: 'SETTINGS_PANEL_SAVE_CLOSE_REASON', description: 'Successful save must emit saved$ and close with reason save.' },