@praxisui/settings-panel 10.0.0-rc.4 → 10.0.0-rc.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -98,6 +98,8 @@ Peer dependencies (Angular v21):
|
|
|
98
98
|
- O shell preserva a instancia Angular, o scroll e o alvo de foco dos frames anteriores. O botao Voltar so aparece quando existe historico e devolve o foco para a etapa restaurada.
|
|
99
99
|
- `surfaceRuntime.navigation$` publica `sessionId`, `activeFrameId`, profundidade e `canGoBack`; esse estado e efemero e nunca deve ser persistido em metadata, `x-ui` ou configuracao de componente.
|
|
100
100
|
- Formularios podem registrar `surfaceRuntime.setCanLeave(guard)` para impedir `back`, `replace`, Escape, backdrop ou fechamento enquanto o lifecycle da etapa exigir confirmacao. O guard e runtime-only e nao substitui regras de negocio nem autorizacao.
|
|
101
|
+
- O guard registrado pelos hooks do conteúdo pertence à etapa que está sendo criada, inclusive na abertura inicial e em replace. A etapa é ativada antes da primeira detecção de mudanças.
|
|
102
|
+
- Em etapas aninhadas, Voltar, X/Fechar, Escape e backdrop consultam o guard da etapa atual e retornam ao pai vivo; nas saídas do usuário, o fechamento da raiz encerra a sessão. O fechamento programático de escopo consulta os guards da sessão inteira. Saídas simultâneas não devem duplicar prompts ou remover duas etapas. Escape continua subordinado a menus, seletores e confirmações sobrepostos.
|
|
101
103
|
- Componentes criados dentro de uma frame podem injetar `SURFACE_DRAWER_REF` e `SURFACE_DRAWER_CONTENT_DATA`. Esses tokens representam exclusivamente a frame ativa e seus inputs efemeros; nao devem ser usados como uma segunda fonte de metadata.
|
|
102
104
|
- O CRUD oficial reutiliza automaticamente a sessao ativa: formularios abertos em modo drawer viram uma nova frame, publicam `save/delete/close` no mesmo ref e retornam ao contexto anterior sem empilhar overlays.
|
|
103
105
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
|
-
"generatedAt": "2026-10-
|
|
3
|
+
"generatedAt": "2026-10-27T22:14:23.237Z",
|
|
4
4
|
"packageName": "@praxisui/settings-panel",
|
|
5
|
-
"packageVersion": "10.0.0-rc.
|
|
5
|
+
"packageVersion": "10.0.0-rc.41",
|
|
6
6
|
"sourceRegistry": "praxis-component-registry-ingestion",
|
|
7
7
|
"sourceRegistryVersion": "1.0.0",
|
|
8
8
|
"componentCount": 1,
|
|
@@ -450,6 +450,11 @@ const PRAXIS_SETTINGS_PANEL_EN_US = {
|
|
|
450
450
|
Back: 'Back',
|
|
451
451
|
Apply: 'Apply',
|
|
452
452
|
'Save & Close': 'Save & Close',
|
|
453
|
+
'Context navigation': 'Context navigation',
|
|
454
|
+
'Previous item': 'Previous item',
|
|
455
|
+
'Next item': 'Next item',
|
|
456
|
+
'Editing target': 'Editing target',
|
|
457
|
+
'Editing modes': 'Editing modes',
|
|
453
458
|
};
|
|
454
459
|
|
|
455
460
|
const PRAXIS_SETTINGS_PANEL_PT_BR = {
|
|
@@ -482,6 +487,11 @@ const PRAXIS_SETTINGS_PANEL_PT_BR = {
|
|
|
482
487
|
Back: 'Voltar',
|
|
483
488
|
Apply: 'Aplicar',
|
|
484
489
|
'Save & Close': 'Salvar e fechar',
|
|
490
|
+
'Context navigation': 'Navegação contextual',
|
|
491
|
+
'Previous item': 'Item anterior',
|
|
492
|
+
'Next item': 'Próximo item',
|
|
493
|
+
'Editing target': 'Item em edição',
|
|
494
|
+
'Editing modes': 'Modos de edição',
|
|
485
495
|
};
|
|
486
496
|
|
|
487
497
|
const PRAXIS_SETTINGS_PANEL_I18N_NAMESPACE = 'praxis-settings-panel';
|
|
@@ -564,6 +574,7 @@ class SettingsPanelComponent {
|
|
|
564
574
|
expanded = false;
|
|
565
575
|
interactionActive = true;
|
|
566
576
|
previewTarget;
|
|
577
|
+
contextNavigation;
|
|
567
578
|
previewing = false;
|
|
568
579
|
previewElement = null;
|
|
569
580
|
previewScroll = [];
|
|
@@ -611,6 +622,104 @@ class SettingsPanelComponent {
|
|
|
611
622
|
get canInspectPreview() {
|
|
612
623
|
return !!this.previewTarget && this.interactionActive && this.isValid && !this.isBusy;
|
|
613
624
|
}
|
|
625
|
+
get hasContextNavigation() {
|
|
626
|
+
const nav = this.contextNavigation;
|
|
627
|
+
return !!(nav && ((nav.targets && nav.targets.length > 0) || (nav.modes && nav.modes.length > 0)));
|
|
628
|
+
}
|
|
629
|
+
get activeTargetIndex() {
|
|
630
|
+
const targets = this.contextNavigation?.targets;
|
|
631
|
+
const activeId = this.contextNavigation?.activeTargetId;
|
|
632
|
+
if (!targets?.length || !activeId)
|
|
633
|
+
return -1;
|
|
634
|
+
return targets.findIndex((target) => target.id === activeId);
|
|
635
|
+
}
|
|
636
|
+
get canSelectPreviousTarget() {
|
|
637
|
+
return this.interactionActive && !this.isBusy && this.activeTargetIndex > 0;
|
|
638
|
+
}
|
|
639
|
+
get canSelectNextTarget() {
|
|
640
|
+
const targets = this.contextNavigation?.targets;
|
|
641
|
+
const idx = this.activeTargetIndex;
|
|
642
|
+
return this.interactionActive && !this.isBusy && !!targets && idx >= 0 && idx < targets.length - 1;
|
|
643
|
+
}
|
|
644
|
+
selectPreviousTarget() {
|
|
645
|
+
const targets = this.contextNavigation?.targets;
|
|
646
|
+
const idx = this.activeTargetIndex;
|
|
647
|
+
if (!targets || idx <= 0)
|
|
648
|
+
return;
|
|
649
|
+
this.selectContextTarget(targets[idx - 1].id);
|
|
650
|
+
}
|
|
651
|
+
selectNextTarget() {
|
|
652
|
+
const targets = this.contextNavigation?.targets;
|
|
653
|
+
const idx = this.activeTargetIndex;
|
|
654
|
+
if (!targets || idx < 0 || idx >= targets.length - 1)
|
|
655
|
+
return;
|
|
656
|
+
this.selectContextTarget(targets[idx + 1].id);
|
|
657
|
+
}
|
|
658
|
+
selectContextTarget(targetId, selectElement) {
|
|
659
|
+
const nav = this.contextNavigation;
|
|
660
|
+
if (!nav?.onSelectTarget ||
|
|
661
|
+
!targetId ||
|
|
662
|
+
targetId === nav.activeTargetId ||
|
|
663
|
+
this.isBusy ||
|
|
664
|
+
!this.interactionActive ||
|
|
665
|
+
!this.isValid) {
|
|
666
|
+
if (selectElement && nav?.activeTargetId) {
|
|
667
|
+
selectElement.value = nav.activeTargetId;
|
|
668
|
+
}
|
|
669
|
+
this.cdr.markForCheck();
|
|
670
|
+
return;
|
|
671
|
+
}
|
|
672
|
+
if (this.canApply) {
|
|
673
|
+
this.onApply();
|
|
674
|
+
if (!this.isValid || this.isBusy) {
|
|
675
|
+
if (selectElement && nav.activeTargetId) {
|
|
676
|
+
selectElement.value = nav.activeTargetId;
|
|
677
|
+
}
|
|
678
|
+
this.cdr.markForCheck();
|
|
679
|
+
return;
|
|
680
|
+
}
|
|
681
|
+
if (this.hasAppliedChanges) {
|
|
682
|
+
this.isDirty = false;
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
nav.onSelectTarget(targetId);
|
|
686
|
+
if (selectElement &&
|
|
687
|
+
this.contextNavigation?.activeTargetId &&
|
|
688
|
+
selectElement.value !== this.contextNavigation.activeTargetId) {
|
|
689
|
+
selectElement.value = this.contextNavigation.activeTargetId;
|
|
690
|
+
}
|
|
691
|
+
this.cdr.markForCheck();
|
|
692
|
+
}
|
|
693
|
+
selectContextMode(modeId) {
|
|
694
|
+
const nav = this.contextNavigation;
|
|
695
|
+
if (!nav?.onSelectMode || !modeId || modeId === nav.activeModeId || this.isBusy || !this.interactionActive) {
|
|
696
|
+
return;
|
|
697
|
+
}
|
|
698
|
+
const mode = nav.modes?.find((item) => item.id === modeId);
|
|
699
|
+
if (mode?.disabled) {
|
|
700
|
+
return;
|
|
701
|
+
}
|
|
702
|
+
const currentMode = nav.modes?.find((item) => item.id === nav.activeModeId);
|
|
703
|
+
const sharesEditorGroup = Boolean(mode?.editorGroup && currentMode?.editorGroup && mode.editorGroup === currentMode.editorGroup);
|
|
704
|
+
if (!sharesEditorGroup) {
|
|
705
|
+
if (!this.isValid) {
|
|
706
|
+
this.cdr.markForCheck();
|
|
707
|
+
return;
|
|
708
|
+
}
|
|
709
|
+
if (this.canApply) {
|
|
710
|
+
this.onApply();
|
|
711
|
+
if (!this.isValid || this.isBusy) {
|
|
712
|
+
this.cdr.markForCheck();
|
|
713
|
+
return;
|
|
714
|
+
}
|
|
715
|
+
if (this.hasAppliedChanges) {
|
|
716
|
+
this.isDirty = false;
|
|
717
|
+
}
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
nav.onSelectMode(modeId);
|
|
721
|
+
this.cdr.markForCheck();
|
|
722
|
+
}
|
|
614
723
|
showPreview() {
|
|
615
724
|
if (!this.canInspectPreview)
|
|
616
725
|
return;
|
|
@@ -1148,7 +1257,7 @@ class SettingsPanelComponent {
|
|
|
1148
1257
|
.afterClosed();
|
|
1149
1258
|
}
|
|
1150
1259
|
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 });
|
|
1151
|
-
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 });
|
|
1260
|
+
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 (hasContextNavigation && !previewing) {\n <nav\n class=\"settings-panel-context-nav\"\n data-testid=\"settings-panel-context-nav\"\n [attr.aria-label]=\"tx('Context navigation')\"\n >\n @if (contextNavigation?.targets?.length) {\n <div class=\"settings-panel-context-nav__targets\">\n <button\n praxisIconButton=\"chevron_left\"\n size=\"compact\"\n type=\"button\"\n data-testid=\"settings-panel-prev-target\"\n [disabled]=\"!canSelectPreviousTarget\"\n [attr.aria-label]=\"tx('Previous item')\"\n [matTooltip]=\"tx('Previous item')\"\n (click)=\"selectPreviousTarget()\"\n ></button>\n <select\n #targetSelect\n class=\"settings-panel-context-nav__target-select\"\n data-testid=\"settings-panel-target-select\"\n [disabled]=\"isBusy || !interactionActive\"\n [attr.aria-label]=\"tx('Editing target')\"\n [value]=\"contextNavigation?.activeTargetId || ''\"\n (change)=\"selectContextTarget(targetSelect.value, targetSelect)\"\n >\n @for (target of contextNavigation?.targets || []; track target.id) {\n <option [value]=\"target.id\" [selected]=\"target.id === contextNavigation?.activeTargetId\">\n {{ target.label }}\n </option>\n }\n </select>\n <button\n praxisIconButton=\"chevron_right\"\n size=\"compact\"\n type=\"button\"\n data-testid=\"settings-panel-next-target\"\n [disabled]=\"!canSelectNextTarget\"\n [attr.aria-label]=\"tx('Next item')\"\n [matTooltip]=\"tx('Next item')\"\n (click)=\"selectNextTarget()\"\n ></button>\n </div>\n }\n @if (contextNavigation?.modes?.length) {\n <div\n class=\"settings-panel-context-nav__modes\"\n role=\"group\"\n [attr.aria-label]=\"tx('Editing modes')\"\n >\n @for (mode of contextNavigation?.modes || []; track mode.id) {\n <button\n type=\"button\"\n class=\"settings-panel-context-nav__mode-btn\"\n [class.is-active]=\"mode.id === contextNavigation?.activeModeId\"\n [disabled]=\"mode.disabled || isBusy || !interactionActive\"\n [attr.aria-pressed]=\"mode.id === contextNavigation?.activeModeId\"\n [attr.title]=\"mode.label\"\n [attr.data-testid]=\"'settings-panel-mode-' + mode.id\"\n (click)=\"selectContextMode(mode.id)\"\n >\n {{ mode.label }}\n </button>\n }\n </div>\n }\n </nav>\n }\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 auto 1fr auto;grid-template-areas:\"header\" \"context-nav\" \"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-context-nav{grid-area:context-nav;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:8px var(--pfx-settings-panel-header-padding-x, 20px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low);min-width:0;max-width:100%}praxis-settings-panel .settings-panel-context-nav__targets{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 200px}praxis-settings-panel .settings-panel-context-nav__target-select{flex:1 1 auto;min-width:0;min-height:34px;padding:4px 10px;border-radius:8px;border:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface);color:var(--pfx-settings-panel-on-surface);font:inherit;font-size:.84rem;font-weight:600}praxis-settings-panel .settings-panel-context-nav__modes{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;padding:2px;max-width:100%;border-radius:999px;border:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface)}praxis-settings-panel .settings-panel-context-nav__mode-btn{appearance:none;border:none;background:transparent;color:var(--pfx-settings-panel-on-surface-variant);font:inherit;font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:background-color .14s ease,color .14s ease}praxis-settings-panel .settings-panel-context-nav__mode-btn.is-active{background:var(--pfx-settings-panel-primary-container);color:var(--pfx-settings-panel-on-primary-container)}praxis-settings-panel .settings-panel-context-nav__mode-btn:disabled{opacity:.42;cursor:not-allowed}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{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-card-title,praxis-settings-panel .settings-panel .mat-mdc-card-content{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field{width:100%;align-self:start;--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 .mat-mdc-text-field-wrapper.mdc-text-field--filled,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 .mdc-text-field--filled .mat-mdc-form-field-flex,praxis-settings-panel .settings-panel .mdc-text-field--filled .mat-mdc-form-field-infix,praxis-settings-panel .settings-panel .mdc-text-field--filled .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-text-field-wrapper.mdc-text-field--outlined,praxis-settings-panel .settings-panel .mdc-text-field--outlined,praxis-settings-panel .settings-panel .mdc-text-field--outlined .mat-mdc-form-field-flex,praxis-settings-panel .settings-panel .mdc-text-field--outlined .mat-mdc-form-field-infix{background:transparent!important;background-color:transparent!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-floating-label,praxis-settings-panel .settings-panel .mat-mdc-select-placeholder,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 .mat-mdc-select-value,praxis-settings-panel .settings-panel .mat-mdc-select-value-text,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input,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 .mdc-text-field--focused:not(.mdc-text-field--invalid) .mat-mdc-floating-label,praxis-settings-panel .settings-panel .mdc-text-field--filled.mdc-text-field--focused .mdc-floating-label{color:var(--pfx-settings-panel-primary)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field .mdc-text-field--invalid .mat-mdc-floating-label{color:var(--pfx-settings-panel-error)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field-subscript-wrapper{position:relative;box-sizing:border-box}praxis-settings-panel .settings-panel .mat-mdc-form-field-hint-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-error-wrapper{position:relative!important;top:auto!important;left:auto!important;right:auto!important;padding-top:4px;line-height:1.35}praxis-settings-panel .settings-panel .mat-mdc-form-field-bottom-align:before{display:none}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)}praxis-settings-panel .settings-panel .pfx-editor-section{box-sizing:border-box;width:100%;min-width:0;padding:16px;border-radius:16px;border:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .pfx-editor-subgroup{display:grid;gap:12px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--pfx-settings-panel-outline-variant) 70%,transparent)}praxis-settings-panel .settings-panel .pfx-editor-subgroup:first-child{padding-top:0;border-top:0}praxis-settings-panel .settings-panel .pfx-editor-grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;min-width:0}praxis-settings-panel .settings-panel .pfx-editor-toggle-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}.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 });
|
|
1152
1261
|
}
|
|
1153
1262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsPanelComponent, decorators: [{
|
|
1154
1263
|
type: Component,
|
|
@@ -1163,7 +1272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1163
1272
|
CdkTrapFocus,
|
|
1164
1273
|
MatProgressSpinnerModule,
|
|
1165
1274
|
MatDialogModule,
|
|
1166
|
-
], 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"] }]
|
|
1275
|
+
], 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 (hasContextNavigation && !previewing) {\n <nav\n class=\"settings-panel-context-nav\"\n data-testid=\"settings-panel-context-nav\"\n [attr.aria-label]=\"tx('Context navigation')\"\n >\n @if (contextNavigation?.targets?.length) {\n <div class=\"settings-panel-context-nav__targets\">\n <button\n praxisIconButton=\"chevron_left\"\n size=\"compact\"\n type=\"button\"\n data-testid=\"settings-panel-prev-target\"\n [disabled]=\"!canSelectPreviousTarget\"\n [attr.aria-label]=\"tx('Previous item')\"\n [matTooltip]=\"tx('Previous item')\"\n (click)=\"selectPreviousTarget()\"\n ></button>\n <select\n #targetSelect\n class=\"settings-panel-context-nav__target-select\"\n data-testid=\"settings-panel-target-select\"\n [disabled]=\"isBusy || !interactionActive\"\n [attr.aria-label]=\"tx('Editing target')\"\n [value]=\"contextNavigation?.activeTargetId || ''\"\n (change)=\"selectContextTarget(targetSelect.value, targetSelect)\"\n >\n @for (target of contextNavigation?.targets || []; track target.id) {\n <option [value]=\"target.id\" [selected]=\"target.id === contextNavigation?.activeTargetId\">\n {{ target.label }}\n </option>\n }\n </select>\n <button\n praxisIconButton=\"chevron_right\"\n size=\"compact\"\n type=\"button\"\n data-testid=\"settings-panel-next-target\"\n [disabled]=\"!canSelectNextTarget\"\n [attr.aria-label]=\"tx('Next item')\"\n [matTooltip]=\"tx('Next item')\"\n (click)=\"selectNextTarget()\"\n ></button>\n </div>\n }\n @if (contextNavigation?.modes?.length) {\n <div\n class=\"settings-panel-context-nav__modes\"\n role=\"group\"\n [attr.aria-label]=\"tx('Editing modes')\"\n >\n @for (mode of contextNavigation?.modes || []; track mode.id) {\n <button\n type=\"button\"\n class=\"settings-panel-context-nav__mode-btn\"\n [class.is-active]=\"mode.id === contextNavigation?.activeModeId\"\n [disabled]=\"mode.disabled || isBusy || !interactionActive\"\n [attr.aria-pressed]=\"mode.id === contextNavigation?.activeModeId\"\n [attr.title]=\"mode.label\"\n [attr.data-testid]=\"'settings-panel-mode-' + mode.id\"\n (click)=\"selectContextMode(mode.id)\"\n >\n {{ mode.label }}\n </button>\n }\n </div>\n }\n </nav>\n }\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 auto 1fr auto;grid-template-areas:\"header\" \"context-nav\" \"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-context-nav{grid-area:context-nav;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:8px var(--pfx-settings-panel-header-padding-x, 20px);border-bottom:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low);min-width:0;max-width:100%}praxis-settings-panel .settings-panel-context-nav__targets{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 200px}praxis-settings-panel .settings-panel-context-nav__target-select{flex:1 1 auto;min-width:0;min-height:34px;padding:4px 10px;border-radius:8px;border:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface);color:var(--pfx-settings-panel-on-surface);font:inherit;font-size:.84rem;font-weight:600}praxis-settings-panel .settings-panel-context-nav__modes{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;padding:2px;max-width:100%;border-radius:999px;border:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface)}praxis-settings-panel .settings-panel-context-nav__mode-btn{appearance:none;border:none;background:transparent;color:var(--pfx-settings-panel-on-surface-variant);font:inherit;font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:background-color .14s ease,color .14s ease}praxis-settings-panel .settings-panel-context-nav__mode-btn.is-active{background:var(--pfx-settings-panel-primary-container);color:var(--pfx-settings-panel-on-primary-container)}praxis-settings-panel .settings-panel-context-nav__mode-btn:disabled{opacity:.42;cursor:not-allowed}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{color:var(--pfx-settings-panel-on-surface-variant)}praxis-settings-panel .settings-panel .mat-mdc-card-title,praxis-settings-panel .settings-panel .mat-mdc-card-content{color:var(--pfx-settings-panel-on-surface)}praxis-settings-panel .settings-panel .mat-mdc-form-field{width:100%;align-self:start;--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 .mat-mdc-text-field-wrapper.mdc-text-field--filled,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 .mdc-text-field--filled .mat-mdc-form-field-flex,praxis-settings-panel .settings-panel .mdc-text-field--filled .mat-mdc-form-field-infix,praxis-settings-panel .settings-panel .mdc-text-field--filled .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-text-field-wrapper.mdc-text-field--outlined,praxis-settings-panel .settings-panel .mdc-text-field--outlined,praxis-settings-panel .settings-panel .mdc-text-field--outlined .mat-mdc-form-field-flex,praxis-settings-panel .settings-panel .mdc-text-field--outlined .mat-mdc-form-field-infix{background:transparent!important;background-color:transparent!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-floating-label,praxis-settings-panel .settings-panel .mat-mdc-select-placeholder,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 .mat-mdc-select-value,praxis-settings-panel .settings-panel .mat-mdc-select-value-text,praxis-settings-panel .settings-panel .mdc-text-field--filled .mdc-text-field__input,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 .mdc-text-field--focused:not(.mdc-text-field--invalid) .mat-mdc-floating-label,praxis-settings-panel .settings-panel .mdc-text-field--filled.mdc-text-field--focused .mdc-floating-label{color:var(--pfx-settings-panel-primary)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field .mdc-text-field--invalid .mat-mdc-floating-label{color:var(--pfx-settings-panel-error)!important}praxis-settings-panel .settings-panel .mat-mdc-form-field-subscript-wrapper{position:relative;box-sizing:border-box}praxis-settings-panel .settings-panel .mat-mdc-form-field-hint-wrapper,praxis-settings-panel .settings-panel .mat-mdc-form-field-error-wrapper{position:relative!important;top:auto!important;left:auto!important;right:auto!important;padding-top:4px;line-height:1.35}praxis-settings-panel .settings-panel .mat-mdc-form-field-bottom-align:before{display:none}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)}praxis-settings-panel .settings-panel .pfx-editor-section{box-sizing:border-box;width:100%;min-width:0;padding:16px;border-radius:16px;border:1px solid var(--pfx-settings-panel-outline-variant);background:var(--pfx-settings-panel-surface-container-low)}praxis-settings-panel .settings-panel .pfx-editor-subgroup{display:grid;gap:12px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--pfx-settings-panel-outline-variant) 70%,transparent)}praxis-settings-panel .settings-panel .pfx-editor-subgroup:first-child{padding-top:0;border-top:0}praxis-settings-panel .settings-panel .pfx-editor-grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;min-width:0}praxis-settings-panel .settings-panel .pfx-editor-toggle-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}.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"] }]
|
|
1167
1276
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i0.ElementRef }, { type: i1$1.OverlayContainer }], propDecorators: { focusTrap: [{
|
|
1168
1277
|
type: ViewChild,
|
|
1169
1278
|
args: [CdkTrapFocus]
|
|
@@ -2003,6 +2112,7 @@ class SettingsPanelService {
|
|
|
2003
2112
|
});
|
|
2004
2113
|
panelRef.instance.configureDiagnostics(config.diagnostics);
|
|
2005
2114
|
panelRef.instance.previewTarget = config.previewTarget;
|
|
2115
|
+
panelRef.instance.contextNavigation = config.contextNavigation;
|
|
2006
2116
|
this.currentPanelInstance = panelRef.instance;
|
|
2007
2117
|
this.currentScope = scope;
|
|
2008
2118
|
this.currentContentParentInjector = contentParentInjector;
|
|
@@ -2086,6 +2196,7 @@ function providePraxisSettingsPanelBridge() {
|
|
|
2086
2196
|
title: opts.title,
|
|
2087
2197
|
titleIcon: opts.titleIcon,
|
|
2088
2198
|
previewTarget: opts.previewTarget,
|
|
2199
|
+
contextNavigation: opts.contextNavigation,
|
|
2089
2200
|
content: {
|
|
2090
2201
|
component: opts.content.component,
|
|
2091
2202
|
inputs: (opts.content.inputs || undefined),
|
|
@@ -2158,6 +2269,10 @@ class SurfaceDrawerComponent {
|
|
|
2158
2269
|
}
|
|
2159
2270
|
setTitle(title) {
|
|
2160
2271
|
this.title = title;
|
|
2272
|
+
const active = this.frames[this.frames.length - 1];
|
|
2273
|
+
if (active) {
|
|
2274
|
+
active.definition = { ...active.definition, title };
|
|
2275
|
+
}
|
|
2161
2276
|
this.cdr.markForCheck();
|
|
2162
2277
|
}
|
|
2163
2278
|
ngOnDestroy() {
|
|
@@ -2180,16 +2295,12 @@ class SurfaceDrawerComponent {
|
|
|
2180
2295
|
initializeFrame(definition, injector, inputs) {
|
|
2181
2296
|
this.destroyAllFrames();
|
|
2182
2297
|
const frame = this.createFrame(definition, injector, inputs);
|
|
2183
|
-
this.frames = [frame];
|
|
2184
|
-
this.applyFrameHeader(frame);
|
|
2185
2298
|
return frame.componentRef;
|
|
2186
2299
|
}
|
|
2187
2300
|
pushFrame(definition, injector, inputs) {
|
|
2188
2301
|
this.captureActiveFrameState(definition.returnFocusTo);
|
|
2189
2302
|
this.detachActiveView();
|
|
2190
2303
|
const frame = this.createFrame(definition, injector, inputs);
|
|
2191
|
-
this.frames.push(frame);
|
|
2192
|
-
this.applyFrameHeader(frame);
|
|
2193
2304
|
this.focusNavigationControl();
|
|
2194
2305
|
return frame.componentRef;
|
|
2195
2306
|
}
|
|
@@ -2199,8 +2310,6 @@ class SurfaceDrawerComponent {
|
|
|
2199
2310
|
}
|
|
2200
2311
|
this.removeActiveFrame();
|
|
2201
2312
|
const frame = this.createFrame(definition, injector, inputs);
|
|
2202
|
-
this.frames.push(frame);
|
|
2203
|
-
this.applyFrameHeader(frame);
|
|
2204
2313
|
this.focusNavigationControl();
|
|
2205
2314
|
return frame.componentRef;
|
|
2206
2315
|
}
|
|
@@ -2247,16 +2356,21 @@ class SurfaceDrawerComponent {
|
|
|
2247
2356
|
}
|
|
2248
2357
|
createFrame(definition, injector, inputs) {
|
|
2249
2358
|
const componentRef = this.contentHost.createComponent(definition.content.component, { injector });
|
|
2250
|
-
|
|
2251
|
-
this.contentRef = componentRef;
|
|
2252
|
-
this.cdr.markForCheck();
|
|
2253
|
-
return {
|
|
2359
|
+
const frame = {
|
|
2254
2360
|
definition,
|
|
2255
2361
|
componentRef,
|
|
2256
2362
|
scrollTop: 0,
|
|
2257
2363
|
restoreFocusTo: null,
|
|
2258
2364
|
canLeave: definition.canLeave ?? null,
|
|
2259
2365
|
};
|
|
2366
|
+
// Hosted lifecycle hooks register their guard and header overrides through the active frame ref.
|
|
2367
|
+
// Make that frame current and apply its default header before the first detectChanges runs those hooks.
|
|
2368
|
+
this.frames.push(frame);
|
|
2369
|
+
this.contentRef = componentRef;
|
|
2370
|
+
this.applyFrameHeader(frame);
|
|
2371
|
+
this.applyInputs(componentRef, inputs);
|
|
2372
|
+
this.cdr.markForCheck();
|
|
2373
|
+
return frame;
|
|
2260
2374
|
}
|
|
2261
2375
|
captureActiveFrameState(returnFocusTo) {
|
|
2262
2376
|
const active = this.frames[this.frames.length - 1];
|
|
@@ -2441,6 +2555,8 @@ function providePraxisSurfaceDrawerBridge() {
|
|
|
2441
2555
|
let panel = null;
|
|
2442
2556
|
let activeRef = null;
|
|
2443
2557
|
const frameRefs = [];
|
|
2558
|
+
let navigatingBack = false;
|
|
2559
|
+
let closingSession = false;
|
|
2444
2560
|
const createContent = (frame, mode, runtimeRef) => {
|
|
2445
2561
|
if (!panel)
|
|
2446
2562
|
return null;
|
|
@@ -2477,16 +2593,44 @@ function providePraxisSurfaceDrawerBridge() {
|
|
|
2477
2593
|
runtime.__closeFrame?.(result);
|
|
2478
2594
|
};
|
|
2479
2595
|
const navigateBack = async (result) => {
|
|
2480
|
-
|
|
2481
|
-
const moved = await panel?.backFrame() ?? false;
|
|
2482
|
-
if (!moved)
|
|
2596
|
+
if (navigatingBack || closingSession)
|
|
2483
2597
|
return false;
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2598
|
+
navigatingBack = true;
|
|
2599
|
+
try {
|
|
2600
|
+
const leaving = frameRefs[frameRefs.length - 1];
|
|
2601
|
+
const moved = await panel?.backFrame() ?? false;
|
|
2602
|
+
if (!moved)
|
|
2603
|
+
return false;
|
|
2604
|
+
if (leaving) {
|
|
2605
|
+
frameRefs.pop();
|
|
2606
|
+
closeFrameRef(leaving, result ?? { type: 'back' });
|
|
2607
|
+
}
|
|
2608
|
+
publishNavigationState();
|
|
2609
|
+
return true;
|
|
2610
|
+
}
|
|
2611
|
+
finally {
|
|
2612
|
+
navigatingBack = false;
|
|
2613
|
+
}
|
|
2614
|
+
};
|
|
2615
|
+
const requestSessionClose = async (reason, ref) => {
|
|
2616
|
+
if (closingSession || navigatingBack)
|
|
2617
|
+
return;
|
|
2618
|
+
closingSession = true;
|
|
2619
|
+
try {
|
|
2620
|
+
if (await panel?.canCloseSession())
|
|
2621
|
+
ref.close({ type: reason });
|
|
2622
|
+
}
|
|
2623
|
+
finally {
|
|
2624
|
+
closingSession = false;
|
|
2487
2625
|
}
|
|
2488
|
-
|
|
2489
|
-
|
|
2626
|
+
};
|
|
2627
|
+
const requestDismiss = async (reason, ref) => {
|
|
2628
|
+
// Dismiss the current step, preserving the live parent collection.
|
|
2629
|
+
if (panel?.canGoBack) {
|
|
2630
|
+
await navigateBack({ type: reason });
|
|
2631
|
+
return;
|
|
2632
|
+
}
|
|
2633
|
+
await requestSessionClose(reason, ref);
|
|
2490
2634
|
};
|
|
2491
2635
|
const createFrameRef = (frameId) => {
|
|
2492
2636
|
const closedSubject = new Subject();
|
|
@@ -2623,10 +2767,7 @@ function providePraxisSurfaceDrawerBridge() {
|
|
|
2623
2767
|
opts.minWidth ||
|
|
2624
2768
|
opts.maxWidth);
|
|
2625
2769
|
panelRef.instance.onClose = () => {
|
|
2626
|
-
void
|
|
2627
|
-
if (allowed)
|
|
2628
|
-
ref.close({ type: 'close' });
|
|
2629
|
-
});
|
|
2770
|
+
void requestDismiss('close', ref);
|
|
2630
2771
|
};
|
|
2631
2772
|
panelRef.instance.onBack = () => { void activeRef?.back?.(); };
|
|
2632
2773
|
ref.bindTitleUpdater((title) => panelRef.instance.setTitle(title));
|
|
@@ -2646,22 +2787,14 @@ function providePraxisSurfaceDrawerBridge() {
|
|
|
2646
2787
|
panelRef.changeDetectorRef.detectChanges();
|
|
2647
2788
|
},
|
|
2648
2789
|
createCloser: (ref) => (reason = 'close') => {
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
ref.close({ type: reason });
|
|
2652
|
-
});
|
|
2790
|
+
// Scope replacement closes the session, not just its current step.
|
|
2791
|
+
void requestSessionClose(reason, ref);
|
|
2653
2792
|
},
|
|
2654
2793
|
onBackdrop: (ref) => {
|
|
2655
|
-
void
|
|
2656
|
-
if (allowed)
|
|
2657
|
-
ref.close({ type: 'backdrop' });
|
|
2658
|
-
});
|
|
2794
|
+
void requestDismiss('backdrop', ref);
|
|
2659
2795
|
},
|
|
2660
2796
|
onEsc: (ref) => {
|
|
2661
|
-
void
|
|
2662
|
-
if (allowed)
|
|
2663
|
-
ref.close({ type: 'esc' });
|
|
2664
|
-
});
|
|
2797
|
+
void requestDismiss('esc', ref);
|
|
2665
2798
|
},
|
|
2666
2799
|
});
|
|
2667
2800
|
result.closed$.subscribe(() => {
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/settings-panel",
|
|
3
|
-
"version": "10.0.0-rc.
|
|
3
|
+
"version": "10.0.0-rc.41",
|
|
4
4
|
"description": "Settings panel for Praxis UI libraries: open editors for configuration at runtime and persist settings.",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/common": "^21.0.0",
|
|
7
7
|
"@angular/core": "^21.0.0",
|
|
8
8
|
"@angular/cdk": "^21.0.0",
|
|
9
9
|
"@angular/material": "^21.0.0",
|
|
10
|
-
"@praxisui/ai": "^10.0.0-rc.
|
|
11
|
-
"@praxisui/core": "^10.0.0-rc.
|
|
12
|
-
"@praxisui/dynamic-fields": "^10.0.0-rc.
|
|
10
|
+
"@praxisui/ai": "^10.0.0-rc.41",
|
|
11
|
+
"@praxisui/core": "^10.0.0-rc.41",
|
|
12
|
+
"@praxisui/dynamic-fields": "^10.0.0-rc.41",
|
|
13
13
|
"rxjs": "~7.8.0"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
@@ -8,6 +8,30 @@ import { MatDialog } from '@angular/material/dialog';
|
|
|
8
8
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
9
9
|
import { AiProviderCatalogItem } from '@praxisui/ai';
|
|
10
10
|
|
|
11
|
+
interface SettingsPanelContextTarget {
|
|
12
|
+
id: string;
|
|
13
|
+
label: string;
|
|
14
|
+
}
|
|
15
|
+
interface SettingsPanelContextMode {
|
|
16
|
+
id: string;
|
|
17
|
+
label: string;
|
|
18
|
+
icon?: string;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Optional logical group identifier. Modes sharing the same `editorGroup`
|
|
22
|
+
* operate on the same active editor instance (in-place tab/section switch)
|
|
23
|
+
* without triggering an intermediate `onApply()` before switching.
|
|
24
|
+
*/
|
|
25
|
+
editorGroup?: string;
|
|
26
|
+
}
|
|
27
|
+
interface SettingsPanelContextNavigation {
|
|
28
|
+
targets?: ReadonlyArray<SettingsPanelContextTarget>;
|
|
29
|
+
activeTargetId?: string;
|
|
30
|
+
onSelectTarget?: (targetId: string) => void;
|
|
31
|
+
modes?: ReadonlyArray<SettingsPanelContextMode>;
|
|
32
|
+
activeModeId?: string;
|
|
33
|
+
onSelectMode?: (modeId: string) => void;
|
|
34
|
+
}
|
|
11
35
|
interface SettingsPanelConfig {
|
|
12
36
|
/** Transient owner lifetime; never persisted or forwarded to editor inputs. */
|
|
13
37
|
owner?: DestroyRef;
|
|
@@ -17,6 +41,8 @@ interface SettingsPanelConfig {
|
|
|
17
41
|
titleIcon?: string;
|
|
18
42
|
/** Ephemeral target for a read-only look at the live result; never persisted. */
|
|
19
43
|
previewTarget?: () => HTMLElement | null;
|
|
44
|
+
/** Optional contextual target/mode navigation bar rendered in the settings panel shell. */
|
|
45
|
+
contextNavigation?: SettingsPanelContextNavigation;
|
|
20
46
|
/** Optional initial expanded state */
|
|
21
47
|
expanded?: boolean;
|
|
22
48
|
resizable?: boolean;
|
|
@@ -449,6 +475,7 @@ declare class SettingsPanelComponent {
|
|
|
449
475
|
expanded: boolean;
|
|
450
476
|
interactionActive: boolean;
|
|
451
477
|
previewTarget?: () => HTMLElement | null;
|
|
478
|
+
contextNavigation?: SettingsPanelContextNavigation;
|
|
452
479
|
previewing: boolean;
|
|
453
480
|
private previewElement;
|
|
454
481
|
private previewScroll;
|
|
@@ -484,6 +511,14 @@ declare class SettingsPanelComponent {
|
|
|
484
511
|
private contentHost;
|
|
485
512
|
constructor(cdr: ChangeDetectorRef, dialog: MatDialog, elementRef: ElementRef<HTMLElement>, overlayContainer: OverlayContainer);
|
|
486
513
|
get canInspectPreview(): boolean;
|
|
514
|
+
get hasContextNavigation(): boolean;
|
|
515
|
+
get activeTargetIndex(): number;
|
|
516
|
+
get canSelectPreviousTarget(): boolean;
|
|
517
|
+
get canSelectNextTarget(): boolean;
|
|
518
|
+
selectPreviousTarget(): void;
|
|
519
|
+
selectNextTarget(): void;
|
|
520
|
+
selectContextTarget(targetId: string, selectElement?: HTMLSelectElement | null): void;
|
|
521
|
+
selectContextMode(modeId: string): void;
|
|
487
522
|
showPreview(): void;
|
|
488
523
|
returnFromPreview(): void;
|
|
489
524
|
private restorePreviewPage;
|
|
@@ -813,4 +848,4 @@ declare const PRAXIS_SETTINGS_PANEL_COMPONENT_METADATA: ComponentDocMeta;
|
|
|
813
848
|
declare function providePraxisSettingsPanelMetadata(): Provider;
|
|
814
849
|
|
|
815
850
|
export { BASE_SIDE_PANEL_DATA, BASE_SIDE_PANEL_REF, BaseSidePanelComponent, BaseSidePanelOverlayRef, BaseSidePanelService, DeferredSettingsPanelRef, GLOBAL_CONFIG_DYNAMIC_FORM_COMPONENT, GlobalConfigAdminService, GlobalConfigEditorComponent, PRAXIS_SETTINGS_PANEL_AUTHORING_MANIFEST, PRAXIS_SETTINGS_PANEL_COMPONENT_METADATA, SETTINGS_PANEL_AI_CAPABILITIES, SETTINGS_PANEL_DATA, SETTINGS_PANEL_REF, SIDE_PANEL_THEME_CSS_VARS, SettingsPanelComponent, SettingsPanelRef, SettingsPanelService, SurfaceDrawerComponent, buildGlobalConfigFormConfig, openGlobalConfigEditor, providePraxisSettingsPanelBridge, providePraxisSettingsPanelMetadata, providePraxisSurfaceDrawerBridge };
|
|
816
|
-
export type { BaseSidePanelCloseReason, BaseSidePanelContent, BaseSidePanelOpenOptions, BaseSidePanelRef, BaseSidePanelResizeAxis, BaseSidePanelResult, Capability, CapabilityCatalog, CapabilityCategory, GlobalConfigEditorFieldSpec, GlobalConfigEditorGroup, GlobalConfigEditorOption, GlobalConfigEditorState, OpenGlobalConfigOptions, SettingsPanelAction, SettingsPanelCloseReason, SettingsPanelConfig, SettingsPanelDiagnosticsConfig, SettingsValueProvider, SidePanelCssVarName, SidePanelMotionContract, SidePanelThemeContract, SidePanelWidthPreset, ValueKind };
|
|
851
|
+
export type { BaseSidePanelCloseReason, BaseSidePanelContent, BaseSidePanelOpenOptions, BaseSidePanelRef, BaseSidePanelResizeAxis, BaseSidePanelResult, Capability, CapabilityCatalog, CapabilityCategory, GlobalConfigEditorFieldSpec, GlobalConfigEditorGroup, GlobalConfigEditorOption, GlobalConfigEditorState, OpenGlobalConfigOptions, SettingsPanelAction, SettingsPanelCloseReason, SettingsPanelConfig, SettingsPanelContextMode, SettingsPanelContextNavigation, SettingsPanelContextTarget, SettingsPanelDiagnosticsConfig, SettingsValueProvider, SidePanelCssVarName, SidePanelMotionContract, SidePanelThemeContract, SidePanelWidthPreset, ValueKind };
|