@praxisui/settings-panel 8.0.0-beta.2 → 8.0.0-beta.21
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 +43 -0
- package/fesm2022/praxisui-settings-panel.mjs +350 -4
- package/index.d.ts +18 -4
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -155,6 +155,7 @@ Regra de integracao:
|
|
|
155
155
|
- `config.persistSizeKey?: string`
|
|
156
156
|
- `config.minWidth?: string`
|
|
157
157
|
- `config.maxWidth?: string`
|
|
158
|
+
- `config.diagnostics?: SettingsPanelDiagnosticsConfig`
|
|
158
159
|
- `config.content: { component: Type<any>; inputs?: Record<string, any> }`
|
|
159
160
|
|
|
160
161
|
### Ref
|
|
@@ -196,6 +197,48 @@ Opcionais:
|
|
|
196
197
|
- `customActions$?`
|
|
197
198
|
- `hideDefaultButtons$?`
|
|
198
199
|
|
|
200
|
+
## Agentic Authoring Contract
|
|
201
|
+
|
|
202
|
+
`praxis-settings-panel` publica um manifesto executavel em `PRAXIS_SETTINGS_PANEL_AUTHORING_MANIFEST`.
|
|
203
|
+
|
|
204
|
+
Esse contrato governa somente o shell autoral:
|
|
205
|
+
|
|
206
|
+
- identidade e titulo do painel
|
|
207
|
+
- modo de abertura e substituicao mediada por `onBeforeClose`
|
|
208
|
+
- largura, resize e persistencia de tamanho
|
|
209
|
+
- comportamento de `Apply`
|
|
210
|
+
- comportamento de `Save`
|
|
211
|
+
- comportamento de `Reset`
|
|
212
|
+
- envelope do editor hospedado
|
|
213
|
+
- diagnosticos baseados em `dirty`, `valid` e `busy`
|
|
214
|
+
|
|
215
|
+
O manifesto nao define semantica de `FormConfig`, `TableConfig`, `ListConfig` ou qualquer outro documento de consumidor. Quando a intencao do usuario alterar a configuracao interna de um editor hospedado, a operacao deve ser delegada para o manifesto do componente dono daquele documento.
|
|
216
|
+
|
|
217
|
+
Regras do contrato:
|
|
218
|
+
|
|
219
|
+
- `Apply` emite `applied$` com `getSettingsValue()` e nao fecha o painel.
|
|
220
|
+
- `Save` usa `onSave()` quando existir, usa `getSettingsValue()` como fallback, emite `saved$` e fecha com motivo `save`.
|
|
221
|
+
- `Reset` e destrutivo, exige confirmacao, chama `reset()` quando existir e emite `reset$`.
|
|
222
|
+
- `Apply` e `Save` continuam bloqueados por `dirty=false`, `valid=false` ou `busy=true`.
|
|
223
|
+
- O editor hospedado deve implementar `SettingsValueProvider` quando o fluxo for autoral.
|
|
224
|
+
- Inputs persistidos do editor devem permanecer serializaveis.
|
|
225
|
+
- `diagnostics` controla somente a visibilidade dos diagnosticos do shell (`statusMessage`, motivo de desabilitacao, busy e estado invalido); ele nao altera as regras de bloqueio de `Apply`/`Save`.
|
|
226
|
+
|
|
227
|
+
### Diagnostics
|
|
228
|
+
|
|
229
|
+
`SettingsPanelConfig.diagnostics` e opcional e preserva o comportamento historico quando omitido:
|
|
230
|
+
|
|
231
|
+
```ts
|
|
232
|
+
{
|
|
233
|
+
showStatusMessage?: boolean;
|
|
234
|
+
showDisabledReason?: boolean;
|
|
235
|
+
showBusyState?: boolean;
|
|
236
|
+
exposeValidationState?: boolean;
|
|
237
|
+
}
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
Use essa configuracao para ajustar a superficie visual do shell autoral. O estado canonico continua vindo de `SettingsValueProvider.isDirty$`, `isValid$` e `isBusy$`.
|
|
241
|
+
|
|
199
242
|
### `onBeforeClose`
|
|
200
243
|
|
|
201
244
|
`onBeforeClose` pertence ao contrato canonico de authoring. Ele pode:
|
|
@@ -480,6 +480,12 @@ function providePraxisSettingsPanelI18n() {
|
|
|
480
480
|
});
|
|
481
481
|
}
|
|
482
482
|
|
|
483
|
+
const DEFAULT_DIAGNOSTICS = {
|
|
484
|
+
showStatusMessage: true,
|
|
485
|
+
showDisabledReason: true,
|
|
486
|
+
showBusyState: true,
|
|
487
|
+
exposeValidationState: true,
|
|
488
|
+
};
|
|
483
489
|
class SettingsPanelComponent {
|
|
484
490
|
cdr;
|
|
485
491
|
dialog;
|
|
@@ -498,6 +504,9 @@ class SettingsPanelComponent {
|
|
|
498
504
|
isDirty = false;
|
|
499
505
|
isValid = true;
|
|
500
506
|
isBusy = false;
|
|
507
|
+
diagnostics = {
|
|
508
|
+
...DEFAULT_DIAGNOSTICS,
|
|
509
|
+
};
|
|
501
510
|
lastSavedAt = null;
|
|
502
511
|
activePointerId = null;
|
|
503
512
|
dragStartX = 0;
|
|
@@ -541,9 +550,20 @@ class SettingsPanelComponent {
|
|
|
541
550
|
}
|
|
542
551
|
return '';
|
|
543
552
|
}
|
|
553
|
+
get applySaveDisabledReason() {
|
|
554
|
+
return this.diagnostics.showDisabledReason ? this.disabledReason : '';
|
|
555
|
+
}
|
|
556
|
+
get showStatusMessage() {
|
|
557
|
+
return this.diagnostics.showStatusMessage;
|
|
558
|
+
}
|
|
559
|
+
get showBusyIndicator() {
|
|
560
|
+
return this.isBusy && this.diagnostics.showBusyState;
|
|
561
|
+
}
|
|
544
562
|
get statusTone() {
|
|
545
|
-
if (this.isBusy)
|
|
563
|
+
if (this.isBusy && this.diagnostics.showBusyState)
|
|
546
564
|
return 'busy';
|
|
565
|
+
if (!this.isValid && this.diagnostics.exposeValidationState)
|
|
566
|
+
return 'invalid';
|
|
547
567
|
if (this.isDirty)
|
|
548
568
|
return 'dirty';
|
|
549
569
|
if (this.lastSavedAt)
|
|
@@ -554,6 +574,9 @@ class SettingsPanelComponent {
|
|
|
554
574
|
if (this.statusTone === 'busy') {
|
|
555
575
|
return this.tx('Operation in progress...');
|
|
556
576
|
}
|
|
577
|
+
if (this.statusTone === 'invalid') {
|
|
578
|
+
return this.tx('The form contains errors that need to be fixed.');
|
|
579
|
+
}
|
|
557
580
|
if (this.statusTone === 'dirty') {
|
|
558
581
|
return this.tx('Unsaved changes');
|
|
559
582
|
}
|
|
@@ -726,6 +749,13 @@ class SettingsPanelComponent {
|
|
|
726
749
|
this.expanded = false;
|
|
727
750
|
this.collapsedWidthBeforeExpand = null;
|
|
728
751
|
}
|
|
752
|
+
configureDiagnostics(config) {
|
|
753
|
+
this.diagnostics = {
|
|
754
|
+
...DEFAULT_DIAGNOSTICS,
|
|
755
|
+
...(config ?? {}),
|
|
756
|
+
};
|
|
757
|
+
this.cdr.markForCheck();
|
|
758
|
+
}
|
|
729
759
|
toggleExpand() {
|
|
730
760
|
if (!this.expanded) {
|
|
731
761
|
this.collapsedWidthBeforeExpand = this.width;
|
|
@@ -911,7 +941,7 @@ class SettingsPanelComponent {
|
|
|
911
941
|
.afterClosed();
|
|
912
942
|
}
|
|
913
943
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SettingsPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
914
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SettingsPanelComponent, isStandalone: true, selector: "praxis-settings-panel", host: { listeners: { "document:keydown": "handleKeydown($event)", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerEnd($event)", "document:pointercancel": "onDocumentPointerEnd($event)" } }, providers: [providePraxisSettingsPanelI18n()], viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"settings-panel\"\n data-testid=\"settings-panel-root\"\n [class.expanded]=\"expanded\"\n [class.is-resizable]=\"showResizeHandle\"\n [ngStyle]=\"panelInlineStyles\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"titleId\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n>\n @if (showResizeHandle) {\n <div\n class=\"settings-panel__resize-handle\"\n role=\"separator\"\n tabindex=\"0\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"resizeHandleLabel\"\n (pointerdown)=\"onResizeHandlePointerDown($event)\"\n (keydown)=\"onResizeHandleKeydown($event)\"\n ></div>\n }\n <header class=\"settings-panel-header\">\n <h2 class=\"settings-panel-title\" [id]=\"titleId\">\n <mat-icon *ngIf=\"titleIcon\" class=\"title-icon\" [praxisIcon]=\"titleIcon\"></mat-icon>\n <span>{{ title }}</span>\n </h2>\n <span class=\"spacer\"></span>\n <button\n mat-icon-button\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 >\n <mat-icon [praxisIcon]=\"expanded ? 'close_fullscreen' : 'open_in_full'\"></mat-icon>\n </button>\n <button\n mat-icon-button\n type=\"button\"\n data-testid=\"settings-panel-close-icon\"\n [attr.aria-label]=\"tx('Close')\"\n [matTooltip]=\"tx('Close')\"\n (click)=\"onCancel()\"\n >\n <mat-icon [praxisIcon]=\"'close'\"></mat-icon>\n </button>\n </header>\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'\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 <div class=\"settings-panel-body\">\n <ng-template #contentHost></ng-template>\n </div>\n <footer class=\"settings-panel-footer\">\n <button\n mat-button\n type=\"button\"\n data-testid=\"settings-panel-reset\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onReset()\"\n [disabled]=\"isBusy\"\n >\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'restart_alt'\"></mat-icon>\n <span>{{ tx('Reset') }}</span>\n </button>\n <span class=\"spacer\"></span>\n <button\n mat-button\n type=\"button\"\n data-testid=\"settings-panel-cancel\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onCancel()\"\n [disabled]=\"isBusy\"\n >\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'close'\"></mat-icon>\n <span>{{ tx('Cancel') }}</span>\n </button>\n <button\n mat-stroked-button\n type=\"button\"\n data-testid=\"settings-panel-apply\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onApply()\"\n [disabled]=\"!canApply\"\n [matTooltip]=\"disabledReason\"\n [matTooltipDisabled]=\"canApply\"\n [attr.aria-busy]=\"isBusy\"\n >\n <mat-progress-spinner\n *ngIf=\"isBusy\"\n mode=\"indeterminate\"\n diameter=\"20\"\n ></mat-progress-spinner>\n <ng-container *ngIf=\"!isBusy\">\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'done'\"></mat-icon>\n <span>{{ tx('Apply') }}</span>\n </ng-container>\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]=\"disabledReason\"\n [matTooltipDisabled]=\"canSave\"\n [attr.aria-busy]=\"isBusy\"\n >\n <mat-progress-spinner\n *ngIf=\"isBusy\"\n mode=\"indeterminate\"\n diameter=\"20\"\n ></mat-progress-spinner>\n <ng-container *ngIf=\"!isBusy\">\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'save'\"></mat-icon>\n <span>{{ tx('Save & Close') }}</span>\n </ng-container>\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}praxis-settings-panel .settings-panel{position:relative;--pfx-settings-panel-surface-container: var( --md-sys-color-surface-container, #ffffff );--pfx-settings-panel-surface-container-high: var( --md-sys-color-surface-container-high, #f7f7f7 );--pfx-settings-panel-surface-container-low: var( --md-sys-color-surface-container-low, #f2f4f7 );--pfx-settings-panel-surface: var(--md-sys-color-surface, #ffffff);--pfx-settings-panel-on-surface: var(--md-sys-color-on-surface, #111827);--pfx-settings-panel-on-surface-variant: var( --md-sys-color-on-surface-variant, rgba(17, 24, 39, .72) );--pfx-settings-panel-outline: var( --md-sys-color-outline, rgba(15, 23, 42, .24) );--pfx-settings-panel-outline-variant: var( --md-sys-color-outline-variant, rgba(15, 23, 42, .12) );--pfx-settings-panel-primary: var(--md-sys-color-primary, #2563eb);--pfx-settings-panel-primary-container: var( --md-sys-color-primary-container, rgba(37, 99, 235, .14) );--pfx-settings-panel-on-primary-container: var( --md-sys-color-on-primary-container, #0f172a );--pfx-settings-panel-secondary: var( --md-sys-color-secondary, var(--pfx-settings-panel-primary) );--pfx-settings-panel-error: var(--md-sys-color-error, #b3261e);--pfx-settings-panel-error-container: var( --md-sys-color-error-container, rgba(179, 38, 30, .14) );display:grid;grid-template-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:var(--pfx-settings-panel-width, 720px);transition:width .3s ease;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.expanded{width:min(var(--pfx-settings-panel-width-expanded, 95vw),var(--pfx-settings-panel-max-width, 2400px))}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:0 var(--pfx-settings-panel-header-padding-x, 16px);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}praxis-settings-panel .settings-panel-header .spacer{flex:1}praxis-settings-panel .settings-panel-status{grid-area:status;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 16px;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}praxis-settings-panel .settings-panel-status mat-icon{width:18px;height:18px;font-size:18px}praxis-settings-panel .settings-panel-status[data-status=dirty]{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;min-height:0;padding:var(--pfx-settings-panel-body-padding, 8px 8px 24px 8px);background:var(--pfx-settings-panel-surface);display:flex;flex-direction:column}praxis-settings-panel .settings-panel-content{display:block}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;padding:var(--pfx-settings-panel-footer-padding, 12px 16px);column-gap:var(--pfx-settings-panel-footer-gap, 12px);flex-shrink:0}praxis-settings-panel .spacer{flex:1}praxis-settings-panel .settings-panel-title{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-title-gap, 8px);font-weight:700;letter-spacing:.2px;margin:0}praxis-settings-panel .settings-panel-title mat-icon{color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel-title .title-icon{width:20px;height:20px;font-size:20px}praxis-settings-panel .settings-panel-footer button+button{margin-left:var(--pfx-settings-panel-footer-gap, 12px)}praxis-settings-panel .settings-panel-footer button{display:inline-flex;align-items:center}praxis-settings-panel .settings-panel-footer button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}praxis-settings-panel .settings-panel-footer .mat-button-wrapper{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px)}praxis-settings-panel .settings-panel-footer .mat-progress-spinner{margin-right:8px}praxis-settings-panel .settings-panel-footer .mat-flat-button[color=primary]{font-weight:600}praxis-settings-panel .settings-panel .mdc-button__label{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px);line-height:1}praxis-settings-panel .settings-panel .mdc-button__label>span{display:inline-flex;align-items:center;line-height:1}praxis-settings-panel .settings-panel .mdc-button__label .mat-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}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)}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)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface-variant)}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)}.praxis-settings-panel-backdrop{background:var(--pfx-backdrop, var(--md-sys-color-scrim, 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-height:100vh!important;z-index:var(--praxis-layer-settings-panel, 1220)!important}.praxis-settings-panel-pane .settings-panel{pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.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 });
|
|
944
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SettingsPanelComponent, isStandalone: true, selector: "praxis-settings-panel", host: { listeners: { "document:keydown": "handleKeydown($event)", "document:pointermove": "onDocumentPointerMove($event)", "document:pointerup": "onDocumentPointerEnd($event)", "document:pointercancel": "onDocumentPointerEnd($event)" } }, providers: [providePraxisSettingsPanelI18n()], viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"settings-panel\"\n data-testid=\"settings-panel-root\"\n [class.expanded]=\"expanded\"\n [class.is-resizable]=\"showResizeHandle\"\n [ngStyle]=\"panelInlineStyles\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"titleId\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n>\n @if (showResizeHandle) {\n <div\n class=\"settings-panel__resize-handle\"\n role=\"separator\"\n tabindex=\"0\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"resizeHandleLabel\"\n (pointerdown)=\"onResizeHandlePointerDown($event)\"\n (keydown)=\"onResizeHandleKeydown($event)\"\n ></div>\n }\n <header class=\"settings-panel-header\">\n <h2 class=\"settings-panel-title\" [id]=\"titleId\">\n <mat-icon *ngIf=\"titleIcon\" class=\"title-icon\" [praxisIcon]=\"titleIcon\"></mat-icon>\n <span>{{ title }}</span>\n </h2>\n <span class=\"spacer\"></span>\n <button\n mat-icon-button\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 >\n <mat-icon [praxisIcon]=\"expanded ? 'close_fullscreen' : 'open_in_full'\"></mat-icon>\n </button>\n <button\n mat-icon-button\n type=\"button\"\n data-testid=\"settings-panel-close-icon\"\n [attr.aria-label]=\"tx('Close')\"\n [matTooltip]=\"tx('Close')\"\n (click)=\"onCancel()\"\n >\n <mat-icon [praxisIcon]=\"'close'\"></mat-icon>\n </button>\n </header>\n @if (showStatusMessage) {\n <div\n class=\"settings-panel-status\"\n [attr.data-status]=\"statusTone\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <mat-icon\n aria-hidden=\"true\"\n [praxisIcon]=\"\n statusTone === 'dirty' || statusTone === 'invalid'\n ? 'warning'\n : statusTone === 'saved'\n ? 'check_circle'\n : statusTone === 'busy'\n ? 'autorenew'\n : 'info'\n \"\n ></mat-icon>\n <span>{{ statusMessage }}</span>\n </div>\n }\n <div class=\"settings-panel-body\">\n <ng-template #contentHost></ng-template>\n </div>\n <footer class=\"settings-panel-footer\">\n <button\n mat-button\n type=\"button\"\n data-testid=\"settings-panel-reset\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onReset()\"\n [disabled]=\"isBusy\"\n >\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'restart_alt'\"></mat-icon>\n <span>{{ tx('Reset') }}</span>\n </button>\n <span class=\"spacer\"></span>\n <button\n mat-button\n type=\"button\"\n data-testid=\"settings-panel-cancel\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onCancel()\"\n [disabled]=\"isBusy\"\n >\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'close'\"></mat-icon>\n <span>{{ tx('Cancel') }}</span>\n </button>\n <button\n mat-stroked-button\n type=\"button\"\n data-testid=\"settings-panel-apply\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onApply()\"\n [disabled]=\"!canApply\"\n [matTooltip]=\"applySaveDisabledReason\"\n [matTooltipDisabled]=\"canApply || !diagnostics.showDisabledReason\"\n [attr.aria-busy]=\"isBusy\"\n >\n <mat-progress-spinner\n *ngIf=\"showBusyIndicator\"\n mode=\"indeterminate\"\n diameter=\"20\"\n ></mat-progress-spinner>\n <ng-container *ngIf=\"!showBusyIndicator\">\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'done'\"></mat-icon>\n <span>{{ tx('Apply') }}</span>\n </ng-container>\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 >\n <mat-progress-spinner\n *ngIf=\"showBusyIndicator\"\n mode=\"indeterminate\"\n diameter=\"20\"\n ></mat-progress-spinner>\n <ng-container *ngIf=\"!showBusyIndicator\">\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'save'\"></mat-icon>\n <span>{{ tx('Save & Close') }}</span>\n </ng-container>\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}praxis-settings-panel .settings-panel{position:relative;--pfx-settings-panel-surface-container: var( --md-sys-color-surface-container, #ffffff );--pfx-settings-panel-surface-container-high: var( --md-sys-color-surface-container-high, #f7f7f7 );--pfx-settings-panel-surface-container-low: var( --md-sys-color-surface-container-low, #f2f4f7 );--pfx-settings-panel-surface: var(--md-sys-color-surface, #ffffff);--pfx-settings-panel-on-surface: var(--md-sys-color-on-surface, #111827);--pfx-settings-panel-on-surface-variant: var( --md-sys-color-on-surface-variant, rgba(17, 24, 39, .72) );--pfx-settings-panel-outline: var( --md-sys-color-outline, rgba(15, 23, 42, .24) );--pfx-settings-panel-outline-variant: var( --md-sys-color-outline-variant, rgba(15, 23, 42, .12) );--pfx-settings-panel-primary: var(--md-sys-color-primary, #2563eb);--pfx-settings-panel-primary-container: var( --md-sys-color-primary-container, rgba(37, 99, 235, .14) );--pfx-settings-panel-on-primary-container: var( --md-sys-color-on-primary-container, #0f172a );--pfx-settings-panel-secondary: var( --md-sys-color-secondary, var(--pfx-settings-panel-primary) );--pfx-settings-panel-error: var(--md-sys-color-error, #b3261e);--pfx-settings-panel-error-container: var( --md-sys-color-error-container, rgba(179, 38, 30, .14) );display:grid;grid-template-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:var(--pfx-settings-panel-width, 720px);transition:width .3s ease;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.expanded{width:min(var(--pfx-settings-panel-width-expanded, 95vw),var(--pfx-settings-panel-max-width, 2400px))}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:0 var(--pfx-settings-panel-header-padding-x, 16px);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}praxis-settings-panel .settings-panel-header .spacer{flex:1}praxis-settings-panel .settings-panel-status{grid-area:status;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 16px;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}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;min-height:0;padding:var(--pfx-settings-panel-body-padding, 8px 8px 24px 8px);background:var(--pfx-settings-panel-surface);display:flex;flex-direction:column}praxis-settings-panel .settings-panel-content{display:block}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;padding:var(--pfx-settings-panel-footer-padding, 12px 16px);column-gap:var(--pfx-settings-panel-footer-gap, 12px);flex-shrink:0}praxis-settings-panel .spacer{flex:1}praxis-settings-panel .settings-panel-title{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-title-gap, 8px);font-weight:700;letter-spacing:.2px;margin:0}praxis-settings-panel .settings-panel-title mat-icon{color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel-title .title-icon{width:20px;height:20px;font-size:20px}praxis-settings-panel .settings-panel-footer button+button{margin-left:var(--pfx-settings-panel-footer-gap, 12px)}praxis-settings-panel .settings-panel-footer button{display:inline-flex;align-items:center}praxis-settings-panel .settings-panel-footer button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}praxis-settings-panel .settings-panel-footer .mat-button-wrapper{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px)}praxis-settings-panel .settings-panel-footer .mat-progress-spinner{margin-right:8px}praxis-settings-panel .settings-panel-footer .mat-flat-button[color=primary]{font-weight:600}praxis-settings-panel .settings-panel .mdc-button__label{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px);line-height:1}praxis-settings-panel .settings-panel .mdc-button__label>span{display:inline-flex;align-items:center;line-height:1}praxis-settings-panel .settings-panel .mdc-button__label .mat-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}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)}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)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface-variant)}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)}.praxis-settings-panel-backdrop{background:var(--pfx-backdrop, var(--md-sys-color-scrim, 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-height:100vh!important;z-index:var(--praxis-layer-settings-panel, 1220)!important}.praxis-settings-panel-pane .settings-panel{pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.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 });
|
|
915
945
|
}
|
|
916
946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SettingsPanelComponent, decorators: [{
|
|
917
947
|
type: Component,
|
|
@@ -925,7 +955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
925
955
|
CdkTrapFocus,
|
|
926
956
|
MatProgressSpinnerModule,
|
|
927
957
|
MatDialogModule,
|
|
928
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [providePraxisSettingsPanelI18n()], template: "<div\n class=\"settings-panel\"\n data-testid=\"settings-panel-root\"\n [class.expanded]=\"expanded\"\n [class.is-resizable]=\"showResizeHandle\"\n [ngStyle]=\"panelInlineStyles\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"titleId\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n>\n @if (showResizeHandle) {\n <div\n class=\"settings-panel__resize-handle\"\n role=\"separator\"\n tabindex=\"0\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"resizeHandleLabel\"\n (pointerdown)=\"onResizeHandlePointerDown($event)\"\n (keydown)=\"onResizeHandleKeydown($event)\"\n ></div>\n }\n <header class=\"settings-panel-header\">\n <h2 class=\"settings-panel-title\" [id]=\"titleId\">\n <mat-icon *ngIf=\"titleIcon\" class=\"title-icon\" [praxisIcon]=\"titleIcon\"></mat-icon>\n <span>{{ title }}</span>\n </h2>\n <span class=\"spacer\"></span>\n <button\n mat-icon-button\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 >\n <mat-icon [praxisIcon]=\"expanded ? 'close_fullscreen' : 'open_in_full'\"></mat-icon>\n </button>\n <button\n mat-icon-button\n type=\"button\"\n data-testid=\"settings-panel-close-icon\"\n [attr.aria-label]=\"tx('Close')\"\n [matTooltip]=\"tx('Close')\"\n (click)=\"onCancel()\"\n >\n <mat-icon [praxisIcon]=\"'close'\"></mat-icon>\n </button>\n </header>\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'\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 <div class=\"settings-panel-body\">\n <ng-template #contentHost></ng-template>\n </div>\n <footer class=\"settings-panel-footer\">\n <button\n mat-button\n type=\"button\"\n data-testid=\"settings-panel-reset\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onReset()\"\n [disabled]=\"isBusy\"\n >\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'restart_alt'\"></mat-icon>\n <span>{{ tx('Reset') }}</span>\n </button>\n <span class=\"spacer\"></span>\n <button\n mat-button\n type=\"button\"\n data-testid=\"settings-panel-cancel\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onCancel()\"\n [disabled]=\"isBusy\"\n >\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'close'\"></mat-icon>\n <span>{{ tx('Cancel') }}</span>\n </button>\n <button\n mat-stroked-button\n type=\"button\"\n data-testid=\"settings-panel-apply\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onApply()\"\n [disabled]=\"!canApply\"\n [matTooltip]=\"disabledReason\"\n [matTooltipDisabled]=\"canApply\"\n [attr.aria-busy]=\"isBusy\"\n >\n <mat-progress-spinner\n *ngIf=\"isBusy\"\n mode=\"indeterminate\"\n diameter=\"20\"\n ></mat-progress-spinner>\n <ng-container *ngIf=\"!isBusy\">\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'done'\"></mat-icon>\n <span>{{ tx('Apply') }}</span>\n </ng-container>\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]=\"disabledReason\"\n [matTooltipDisabled]=\"canSave\"\n [attr.aria-busy]=\"isBusy\"\n >\n <mat-progress-spinner\n *ngIf=\"isBusy\"\n mode=\"indeterminate\"\n diameter=\"20\"\n ></mat-progress-spinner>\n <ng-container *ngIf=\"!isBusy\">\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'save'\"></mat-icon>\n <span>{{ tx('Save & Close') }}</span>\n </ng-container>\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}praxis-settings-panel .settings-panel{position:relative;--pfx-settings-panel-surface-container: var( --md-sys-color-surface-container, #ffffff );--pfx-settings-panel-surface-container-high: var( --md-sys-color-surface-container-high, #f7f7f7 );--pfx-settings-panel-surface-container-low: var( --md-sys-color-surface-container-low, #f2f4f7 );--pfx-settings-panel-surface: var(--md-sys-color-surface, #ffffff);--pfx-settings-panel-on-surface: var(--md-sys-color-on-surface, #111827);--pfx-settings-panel-on-surface-variant: var( --md-sys-color-on-surface-variant, rgba(17, 24, 39, .72) );--pfx-settings-panel-outline: var( --md-sys-color-outline, rgba(15, 23, 42, .24) );--pfx-settings-panel-outline-variant: var( --md-sys-color-outline-variant, rgba(15, 23, 42, .12) );--pfx-settings-panel-primary: var(--md-sys-color-primary, #2563eb);--pfx-settings-panel-primary-container: var( --md-sys-color-primary-container, rgba(37, 99, 235, .14) );--pfx-settings-panel-on-primary-container: var( --md-sys-color-on-primary-container, #0f172a );--pfx-settings-panel-secondary: var( --md-sys-color-secondary, var(--pfx-settings-panel-primary) );--pfx-settings-panel-error: var(--md-sys-color-error, #b3261e);--pfx-settings-panel-error-container: var( --md-sys-color-error-container, rgba(179, 38, 30, .14) );display:grid;grid-template-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:var(--pfx-settings-panel-width, 720px);transition:width .3s ease;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.expanded{width:min(var(--pfx-settings-panel-width-expanded, 95vw),var(--pfx-settings-panel-max-width, 2400px))}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:0 var(--pfx-settings-panel-header-padding-x, 16px);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}praxis-settings-panel .settings-panel-header .spacer{flex:1}praxis-settings-panel .settings-panel-status{grid-area:status;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 16px;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}praxis-settings-panel .settings-panel-status mat-icon{width:18px;height:18px;font-size:18px}praxis-settings-panel .settings-panel-status[data-status=dirty]{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;min-height:0;padding:var(--pfx-settings-panel-body-padding, 8px 8px 24px 8px);background:var(--pfx-settings-panel-surface);display:flex;flex-direction:column}praxis-settings-panel .settings-panel-content{display:block}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;padding:var(--pfx-settings-panel-footer-padding, 12px 16px);column-gap:var(--pfx-settings-panel-footer-gap, 12px);flex-shrink:0}praxis-settings-panel .spacer{flex:1}praxis-settings-panel .settings-panel-title{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-title-gap, 8px);font-weight:700;letter-spacing:.2px;margin:0}praxis-settings-panel .settings-panel-title mat-icon{color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel-title .title-icon{width:20px;height:20px;font-size:20px}praxis-settings-panel .settings-panel-footer button+button{margin-left:var(--pfx-settings-panel-footer-gap, 12px)}praxis-settings-panel .settings-panel-footer button{display:inline-flex;align-items:center}praxis-settings-panel .settings-panel-footer button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}praxis-settings-panel .settings-panel-footer .mat-button-wrapper{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px)}praxis-settings-panel .settings-panel-footer .mat-progress-spinner{margin-right:8px}praxis-settings-panel .settings-panel-footer .mat-flat-button[color=primary]{font-weight:600}praxis-settings-panel .settings-panel .mdc-button__label{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px);line-height:1}praxis-settings-panel .settings-panel .mdc-button__label>span{display:inline-flex;align-items:center;line-height:1}praxis-settings-panel .settings-panel .mdc-button__label .mat-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}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)}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)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface-variant)}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)}.praxis-settings-panel-backdrop{background:var(--pfx-backdrop, var(--md-sys-color-scrim, 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-height:100vh!important;z-index:var(--praxis-layer-settings-panel, 1220)!important}.praxis-settings-panel-pane .settings-panel{pointer-events:auto}\n"] }]
|
|
958
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [providePraxisSettingsPanelI18n()], template: "<div\n class=\"settings-panel\"\n data-testid=\"settings-panel-root\"\n [class.expanded]=\"expanded\"\n [class.is-resizable]=\"showResizeHandle\"\n [ngStyle]=\"panelInlineStyles\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"titleId\"\n cdkTrapFocus\n cdkTrapFocusAutoCapture\n>\n @if (showResizeHandle) {\n <div\n class=\"settings-panel__resize-handle\"\n role=\"separator\"\n tabindex=\"0\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"resizeHandleLabel\"\n (pointerdown)=\"onResizeHandlePointerDown($event)\"\n (keydown)=\"onResizeHandleKeydown($event)\"\n ></div>\n }\n <header class=\"settings-panel-header\">\n <h2 class=\"settings-panel-title\" [id]=\"titleId\">\n <mat-icon *ngIf=\"titleIcon\" class=\"title-icon\" [praxisIcon]=\"titleIcon\"></mat-icon>\n <span>{{ title }}</span>\n </h2>\n <span class=\"spacer\"></span>\n <button\n mat-icon-button\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 >\n <mat-icon [praxisIcon]=\"expanded ? 'close_fullscreen' : 'open_in_full'\"></mat-icon>\n </button>\n <button\n mat-icon-button\n type=\"button\"\n data-testid=\"settings-panel-close-icon\"\n [attr.aria-label]=\"tx('Close')\"\n [matTooltip]=\"tx('Close')\"\n (click)=\"onCancel()\"\n >\n <mat-icon [praxisIcon]=\"'close'\"></mat-icon>\n </button>\n </header>\n @if (showStatusMessage) {\n <div\n class=\"settings-panel-status\"\n [attr.data-status]=\"statusTone\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <mat-icon\n aria-hidden=\"true\"\n [praxisIcon]=\"\n statusTone === 'dirty' || statusTone === 'invalid'\n ? 'warning'\n : statusTone === 'saved'\n ? 'check_circle'\n : statusTone === 'busy'\n ? 'autorenew'\n : 'info'\n \"\n ></mat-icon>\n <span>{{ statusMessage }}</span>\n </div>\n }\n <div class=\"settings-panel-body\">\n <ng-template #contentHost></ng-template>\n </div>\n <footer class=\"settings-panel-footer\">\n <button\n mat-button\n type=\"button\"\n data-testid=\"settings-panel-reset\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onReset()\"\n [disabled]=\"isBusy\"\n >\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'restart_alt'\"></mat-icon>\n <span>{{ tx('Reset') }}</span>\n </button>\n <span class=\"spacer\"></span>\n <button\n mat-button\n type=\"button\"\n data-testid=\"settings-panel-cancel\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onCancel()\"\n [disabled]=\"isBusy\"\n >\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'close'\"></mat-icon>\n <span>{{ tx('Cancel') }}</span>\n </button>\n <button\n mat-stroked-button\n type=\"button\"\n data-testid=\"settings-panel-apply\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation(); onApply()\"\n [disabled]=\"!canApply\"\n [matTooltip]=\"applySaveDisabledReason\"\n [matTooltipDisabled]=\"canApply || !diagnostics.showDisabledReason\"\n [attr.aria-busy]=\"isBusy\"\n >\n <mat-progress-spinner\n *ngIf=\"showBusyIndicator\"\n mode=\"indeterminate\"\n diameter=\"20\"\n ></mat-progress-spinner>\n <ng-container *ngIf=\"!showBusyIndicator\">\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'done'\"></mat-icon>\n <span>{{ tx('Apply') }}</span>\n </ng-container>\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 >\n <mat-progress-spinner\n *ngIf=\"showBusyIndicator\"\n mode=\"indeterminate\"\n diameter=\"20\"\n ></mat-progress-spinner>\n <ng-container *ngIf=\"!showBusyIndicator\">\n <mat-icon aria-hidden=\"true\" [praxisIcon]=\"'save'\"></mat-icon>\n <span>{{ tx('Save & Close') }}</span>\n </ng-container>\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}praxis-settings-panel .settings-panel{position:relative;--pfx-settings-panel-surface-container: var( --md-sys-color-surface-container, #ffffff );--pfx-settings-panel-surface-container-high: var( --md-sys-color-surface-container-high, #f7f7f7 );--pfx-settings-panel-surface-container-low: var( --md-sys-color-surface-container-low, #f2f4f7 );--pfx-settings-panel-surface: var(--md-sys-color-surface, #ffffff);--pfx-settings-panel-on-surface: var(--md-sys-color-on-surface, #111827);--pfx-settings-panel-on-surface-variant: var( --md-sys-color-on-surface-variant, rgba(17, 24, 39, .72) );--pfx-settings-panel-outline: var( --md-sys-color-outline, rgba(15, 23, 42, .24) );--pfx-settings-panel-outline-variant: var( --md-sys-color-outline-variant, rgba(15, 23, 42, .12) );--pfx-settings-panel-primary: var(--md-sys-color-primary, #2563eb);--pfx-settings-panel-primary-container: var( --md-sys-color-primary-container, rgba(37, 99, 235, .14) );--pfx-settings-panel-on-primary-container: var( --md-sys-color-on-primary-container, #0f172a );--pfx-settings-panel-secondary: var( --md-sys-color-secondary, var(--pfx-settings-panel-primary) );--pfx-settings-panel-error: var(--md-sys-color-error, #b3261e);--pfx-settings-panel-error-container: var( --md-sys-color-error-container, rgba(179, 38, 30, .14) );display:grid;grid-template-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:var(--pfx-settings-panel-width, 720px);transition:width .3s ease;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.expanded{width:min(var(--pfx-settings-panel-width-expanded, 95vw),var(--pfx-settings-panel-max-width, 2400px))}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:0 var(--pfx-settings-panel-header-padding-x, 16px);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}praxis-settings-panel .settings-panel-header .spacer{flex:1}praxis-settings-panel .settings-panel-status{grid-area:status;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 16px;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}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;min-height:0;padding:var(--pfx-settings-panel-body-padding, 8px 8px 24px 8px);background:var(--pfx-settings-panel-surface);display:flex;flex-direction:column}praxis-settings-panel .settings-panel-content{display:block}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;padding:var(--pfx-settings-panel-footer-padding, 12px 16px);column-gap:var(--pfx-settings-panel-footer-gap, 12px);flex-shrink:0}praxis-settings-panel .spacer{flex:1}praxis-settings-panel .settings-panel-title{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-title-gap, 8px);font-weight:700;letter-spacing:.2px;margin:0}praxis-settings-panel .settings-panel-title mat-icon{color:var(--pfx-settings-panel-primary)}praxis-settings-panel .settings-panel-title .title-icon{width:20px;height:20px;font-size:20px}praxis-settings-panel .settings-panel-footer button+button{margin-left:var(--pfx-settings-panel-footer-gap, 12px)}praxis-settings-panel .settings-panel-footer button{display:inline-flex;align-items:center}praxis-settings-panel .settings-panel-footer button .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}praxis-settings-panel .settings-panel-footer .mat-button-wrapper{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px)}praxis-settings-panel .settings-panel-footer .mat-progress-spinner{margin-right:8px}praxis-settings-panel .settings-panel-footer .mat-flat-button[color=primary]{font-weight:600}praxis-settings-panel .settings-panel .mdc-button__label{display:inline-flex;align-items:center;gap:var(--pfx-settings-panel-button-gap, 8px);line-height:1}praxis-settings-panel .settings-panel .mdc-button__label>span{display:inline-flex;align-items:center;line-height:1}praxis-settings-panel .settings-panel .mdc-button__label .mat-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}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)}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)}praxis-settings-panel .settings-panel .mat-expansion-panel-header .mat-expansion-panel-header-description{color:var(--pfx-settings-panel-on-surface-variant)}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)}.praxis-settings-panel-backdrop{background:var(--pfx-backdrop, var(--md-sys-color-scrim, 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-height:100vh!important;z-index:var(--praxis-layer-settings-panel, 1220)!important}.praxis-settings-panel-pane .settings-panel{pointer-events:auto}\n"] }]
|
|
929
959
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }], propDecorators: { contentHost: [{
|
|
930
960
|
type: ViewChild,
|
|
931
961
|
args: ['contentHost', { read: ViewContainerRef, static: true }]
|
|
@@ -1636,6 +1666,7 @@ class SettingsPanelService {
|
|
|
1636
1666
|
maxWidth: resolvedConfig.maxWidth,
|
|
1637
1667
|
expanded: config.expanded || false,
|
|
1638
1668
|
});
|
|
1669
|
+
panelRef.instance.configureDiagnostics(config.diagnostics);
|
|
1639
1670
|
this.currentPanelInstance = panelRef.instance;
|
|
1640
1671
|
const inputs = config.content.inputs;
|
|
1641
1672
|
const injector = Injector.create({
|
|
@@ -4426,6 +4457,15 @@ const SETTINGS_PANEL_AI_CAPABILITIES = {
|
|
|
4426
4457
|
{ path: 'title', category: 'identity', valueKind: 'string', description: 'Titulo do painel.' },
|
|
4427
4458
|
{ path: 'titleIcon', category: 'identity', valueKind: 'string', description: 'Icone do titulo (Material icon name).' },
|
|
4428
4459
|
{ path: 'expanded', category: 'behavior', valueKind: 'boolean', description: 'Estado inicial expandido.' },
|
|
4460
|
+
{ path: 'resizable', category: 'behavior', valueKind: 'boolean', description: 'Habilita resize horizontal do painel autoral.' },
|
|
4461
|
+
{ path: 'persistSizeKey', category: 'behavior', valueKind: 'string', description: 'Chave estavel para persistencia de largura.' },
|
|
4462
|
+
{ path: 'minWidth', category: 'layout', valueKind: 'string', description: 'Largura minima do painel.' },
|
|
4463
|
+
{ path: 'maxWidth', category: 'layout', valueKind: 'string', description: 'Largura maxima do painel.' },
|
|
4464
|
+
{ path: 'diagnostics', category: 'behavior', valueKind: 'object', description: 'Configuracao opcional de visibilidade dos diagnosticos do shell.' },
|
|
4465
|
+
{ path: 'diagnostics.showStatusMessage', category: 'behavior', valueKind: 'boolean', description: 'Controla a faixa de status do painel.' },
|
|
4466
|
+
{ path: 'diagnostics.showDisabledReason', category: 'behavior', valueKind: 'boolean', description: 'Controla tooltips com motivo de acoes desabilitadas.' },
|
|
4467
|
+
{ path: 'diagnostics.showBusyState', category: 'behavior', valueKind: 'boolean', description: 'Controla indicadores visuais de busy no shell.' },
|
|
4468
|
+
{ path: 'diagnostics.exposeValidationState', category: 'behavior', valueKind: 'boolean', description: 'Controla a exposicao visual de invalidade do provider.' },
|
|
4429
4469
|
{ path: 'content', category: 'content', valueKind: 'object', description: 'Conteudo do painel.' },
|
|
4430
4470
|
{
|
|
4431
4471
|
path: 'content.component',
|
|
@@ -4444,8 +4484,314 @@ const SETTINGS_PANEL_AI_CAPABILITIES = {
|
|
|
4444
4484
|
],
|
|
4445
4485
|
};
|
|
4446
4486
|
|
|
4487
|
+
const panelSizeSchema = {
|
|
4488
|
+
type: 'object',
|
|
4489
|
+
minProperties: 1,
|
|
4490
|
+
properties: {
|
|
4491
|
+
width: { oneOf: [{ type: 'string' }, { type: 'number' }] },
|
|
4492
|
+
minWidth: { type: 'string' },
|
|
4493
|
+
maxWidth: { type: 'string' },
|
|
4494
|
+
resizable: { type: 'boolean' },
|
|
4495
|
+
persistSizeKey: { type: 'string' },
|
|
4496
|
+
expanded: { type: 'boolean' },
|
|
4497
|
+
},
|
|
4498
|
+
};
|
|
4499
|
+
const panelShellSchema = {
|
|
4500
|
+
type: 'object',
|
|
4501
|
+
minProperties: 1,
|
|
4502
|
+
properties: {
|
|
4503
|
+
id: { type: 'string' },
|
|
4504
|
+
title: { type: 'string' },
|
|
4505
|
+
titleIcon: { type: 'string' },
|
|
4506
|
+
},
|
|
4507
|
+
};
|
|
4508
|
+
const editorHostSchema = {
|
|
4509
|
+
type: 'object',
|
|
4510
|
+
required: ['componentId'],
|
|
4511
|
+
properties: {
|
|
4512
|
+
componentId: { type: 'string' },
|
|
4513
|
+
inputs: { type: 'object' },
|
|
4514
|
+
configManifestComponentId: { type: 'string' },
|
|
4515
|
+
editorContract: {
|
|
4516
|
+
enum: ['SettingsValueProvider'],
|
|
4517
|
+
},
|
|
4518
|
+
},
|
|
4519
|
+
};
|
|
4520
|
+
const behaviorSchema = {
|
|
4521
|
+
type: 'object',
|
|
4522
|
+
minProperties: 1,
|
|
4523
|
+
properties: {
|
|
4524
|
+
requireDirty: { type: 'boolean' },
|
|
4525
|
+
requireValid: { type: 'boolean' },
|
|
4526
|
+
blockWhileBusy: { type: 'boolean' },
|
|
4527
|
+
useProviderHook: { type: 'boolean' },
|
|
4528
|
+
closeAfterSave: { type: 'boolean' },
|
|
4529
|
+
},
|
|
4530
|
+
};
|
|
4531
|
+
const PRAXIS_SETTINGS_PANEL_AUTHORING_MANIFEST = {
|
|
4532
|
+
schemaVersion: '1.0.0',
|
|
4533
|
+
componentId: 'praxis-settings-panel',
|
|
4534
|
+
ownerPackage: '@praxisui/settings-panel',
|
|
4535
|
+
configSchemaId: 'SettingsPanelConfig',
|
|
4536
|
+
manifestVersion: '1.0.0',
|
|
4537
|
+
runtimeInputs: [
|
|
4538
|
+
{ name: 'config', type: 'SettingsPanelConfig', description: 'Canonical settings panel shell config passed to SettingsPanelService.open.' },
|
|
4539
|
+
{ name: 'config.diagnostics', type: 'SettingsPanelDiagnosticsConfig', description: 'Optional shell diagnostics visibility config for status, disabled reason, busy state and validation state.' },
|
|
4540
|
+
{ name: 'content.component', type: 'Type<SettingsValueProvider>', description: 'Standalone editor component hosted inside the authoring shell.' },
|
|
4541
|
+
{ name: 'content.inputs', type: 'Record<string, unknown>', description: 'Initial editor inputs owned by the consumer component manifest.' },
|
|
4542
|
+
{ name: 'ref', type: 'SettingsPanelRef', description: 'Panel ref that emits applied, saved, reset, closed and sizeChanged events.' },
|
|
4543
|
+
{ name: 'provider', type: 'SettingsValueProvider', description: 'Editor protocol for dirty, valid, busy, getSettingsValue, onSave, reset and close hooks.' },
|
|
4544
|
+
],
|
|
4545
|
+
editableTargets: [
|
|
4546
|
+
{ kind: 'panelShell', resolver: 'settings-panel-config-root', description: 'Top-level shell identity and title fields owned by SettingsPanelConfig.' },
|
|
4547
|
+
{ kind: 'openMode', resolver: 'settings-panel-open-mode', description: 'Initial expanded state, replacement mediation and close behavior for an authoring panel.' },
|
|
4548
|
+
{ kind: 'panelSize', resolver: 'settings-panel-size-and-resize', description: 'Width, min/max width, resize enablement and persisted size key.' },
|
|
4549
|
+
{ kind: 'applyBehavior', resolver: 'settings-value-provider-apply-contract', description: 'Apply availability and payload emission through getSettingsValue().' },
|
|
4550
|
+
{ kind: 'saveBehavior', resolver: 'settings-value-provider-save-contract', description: 'Save availability, onSave fallback and close-after-save behavior.' },
|
|
4551
|
+
{ kind: 'resetBehavior', resolver: 'settings-value-provider-reset-contract', description: 'Reset confirmation, provider reset hook and reset event emission.' },
|
|
4552
|
+
{ kind: 'editorHost', resolver: 'settings-panel-editor-host', description: 'Hosted editor component and serializable input envelope.' },
|
|
4553
|
+
{ kind: 'diagnostics', resolver: 'settings-panel-state-diagnostics', description: 'Dirty, valid, busy, disabled reason and status message visibility.' },
|
|
4554
|
+
],
|
|
4555
|
+
operations: [
|
|
4556
|
+
{
|
|
4557
|
+
operationId: 'panel.shell.configure',
|
|
4558
|
+
title: 'Configure panel shell identity',
|
|
4559
|
+
scope: 'global',
|
|
4560
|
+
targetKind: 'panelShell',
|
|
4561
|
+
target: { kind: 'panelShell', resolver: 'settings-panel-config-root', ambiguityPolicy: 'fail', required: true },
|
|
4562
|
+
inputSchema: panelShellSchema,
|
|
4563
|
+
effects: [{ kind: 'merge-object', path: 'config' }],
|
|
4564
|
+
validators: ['panel-id-stable', 'title-i18n-compatible', 'settings-panel-round-trip'],
|
|
4565
|
+
affectedPaths: ['config.id', 'config.title', 'config.titleIcon'],
|
|
4566
|
+
submissionImpact: 'config-only',
|
|
4567
|
+
destructive: false,
|
|
4568
|
+
requiresConfirmation: false,
|
|
4569
|
+
preconditions: ['config-initialized'],
|
|
4570
|
+
},
|
|
4571
|
+
{
|
|
4572
|
+
operationId: 'panel.openMode.set',
|
|
4573
|
+
title: 'Set panel open mode',
|
|
4574
|
+
scope: 'global',
|
|
4575
|
+
targetKind: 'openMode',
|
|
4576
|
+
target: { kind: 'openMode', resolver: 'settings-panel-open-mode', ambiguityPolicy: 'fail', required: false },
|
|
4577
|
+
inputSchema: {
|
|
4578
|
+
type: 'object',
|
|
4579
|
+
minProperties: 1,
|
|
4580
|
+
properties: {
|
|
4581
|
+
expanded: { type: 'boolean' },
|
|
4582
|
+
replacementPolicy: { enum: ['consult-current-editor', 'reject-when-dirty', 'force-close-disallowed'] },
|
|
4583
|
+
},
|
|
4584
|
+
},
|
|
4585
|
+
effects: [{ kind: 'merge-object', path: 'config' }],
|
|
4586
|
+
validators: ['replacement-mediates-before-close', 'settings-panel-round-trip'],
|
|
4587
|
+
affectedPaths: ['config.expanded'],
|
|
4588
|
+
submissionImpact: 'config-only',
|
|
4589
|
+
destructive: false,
|
|
4590
|
+
requiresConfirmation: false,
|
|
4591
|
+
preconditions: ['config-initialized'],
|
|
4592
|
+
},
|
|
4593
|
+
{
|
|
4594
|
+
operationId: 'panel.size.set',
|
|
4595
|
+
title: 'Set panel size and resize policy',
|
|
4596
|
+
scope: 'layout',
|
|
4597
|
+
targetKind: 'panelSize',
|
|
4598
|
+
target: { kind: 'panelSize', resolver: 'settings-panel-size-and-resize', ambiguityPolicy: 'fail', required: false },
|
|
4599
|
+
inputSchema: panelSizeSchema,
|
|
4600
|
+
effects: [{ kind: 'compile-domain-patch', handler: 'settings-panel-size-set', handlerContract: {
|
|
4601
|
+
reads: ['SettingsPanelConfig', 'SettingsPanelRef.sizeChanged$', 'persistSizeKey'],
|
|
4602
|
+
writes: ['config.minWidth', 'config.maxWidth', 'config.resizable', 'config.persistSizeKey', 'runtime.size'],
|
|
4603
|
+
identityKeys: ['config.id', 'persistSizeKey'],
|
|
4604
|
+
inputSchema: panelSizeSchema,
|
|
4605
|
+
failureModes: ['invalid-css-size', 'min-width-greater-than-max-width', 'persist-size-key-missing-for-persistence'],
|
|
4606
|
+
description: 'Applies shell size configuration and open-panel width changes through SettingsPanelRef.updateSize without changing hosted editor config semantics.',
|
|
4607
|
+
} }],
|
|
4608
|
+
validators: ['panel-size-safe', 'panel-min-max-consistent', 'resize-persistence-explicit', 'settings-panel-round-trip'],
|
|
4609
|
+
affectedPaths: ['config.minWidth', 'config.maxWidth', 'config.resizable', 'config.persistSizeKey', 'runtime.width'],
|
|
4610
|
+
submissionImpact: 'visual-only',
|
|
4611
|
+
destructive: false,
|
|
4612
|
+
requiresConfirmation: false,
|
|
4613
|
+
preconditions: ['config-initialized'],
|
|
4614
|
+
},
|
|
4615
|
+
{
|
|
4616
|
+
operationId: 'panel.applyBehavior.set',
|
|
4617
|
+
title: 'Set apply behavior',
|
|
4618
|
+
scope: 'interaction',
|
|
4619
|
+
targetKind: 'applyBehavior',
|
|
4620
|
+
target: { kind: 'applyBehavior', resolver: 'settings-value-provider-apply-contract', ambiguityPolicy: 'fail', required: false },
|
|
4621
|
+
inputSchema: behaviorSchema,
|
|
4622
|
+
effects: [{ kind: 'compile-domain-patch', handler: 'settings-panel-apply-behavior-set', handlerContract: {
|
|
4623
|
+
reads: ['SettingsValueProvider.isDirty$', 'SettingsValueProvider.isValid$', 'SettingsValueProvider.isBusy$', 'SettingsValueProvider.getSettingsValue'],
|
|
4624
|
+
writes: ['SettingsPanelRef.applied$'],
|
|
4625
|
+
identityKeys: ['config.id', 'provider.getSettingsValue'],
|
|
4626
|
+
inputSchema: behaviorSchema,
|
|
4627
|
+
failureModes: ['provider-missing-get-settings-value', 'apply-while-invalid', 'apply-while-busy', 'apply-without-dirty-state'],
|
|
4628
|
+
description: 'Keeps Apply gated by dirty, valid and busy state and emits the provider value through SettingsPanelRef.applied$.',
|
|
4629
|
+
} }],
|
|
4630
|
+
validators: ['apply-requires-provider-value', 'dirty-valid-busy-gates-preserved', 'apply-does-not-close-panel', 'settings-panel-round-trip'],
|
|
4631
|
+
affectedPaths: ['provider.isDirty$', 'provider.isValid$', 'provider.isBusy$', 'ref.applied$'],
|
|
4632
|
+
submissionImpact: 'none',
|
|
4633
|
+
destructive: false,
|
|
4634
|
+
requiresConfirmation: false,
|
|
4635
|
+
preconditions: ['settings-value-provider-attached'],
|
|
4636
|
+
},
|
|
4637
|
+
{
|
|
4638
|
+
operationId: 'panel.saveBehavior.set',
|
|
4639
|
+
title: 'Set save behavior',
|
|
4640
|
+
scope: 'interaction',
|
|
4641
|
+
targetKind: 'saveBehavior',
|
|
4642
|
+
target: { kind: 'saveBehavior', resolver: 'settings-value-provider-save-contract', ambiguityPolicy: 'fail', required: false },
|
|
4643
|
+
inputSchema: behaviorSchema,
|
|
4644
|
+
effects: [{ kind: 'compile-domain-patch', handler: 'settings-panel-save-behavior-set', handlerContract: {
|
|
4645
|
+
reads: ['SettingsValueProvider.onSave', 'SettingsValueProvider.getSettingsValue', 'SettingsValueProvider.isDirty$', 'SettingsValueProvider.isValid$', 'SettingsValueProvider.isBusy$'],
|
|
4646
|
+
writes: ['SettingsPanelRef.saved$', 'SettingsPanelRef.closed$'],
|
|
4647
|
+
identityKeys: ['config.id', 'provider.onSave'],
|
|
4648
|
+
inputSchema: behaviorSchema,
|
|
4649
|
+
failureModes: ['save-while-invalid', 'save-while-busy', 'save-result-undefined', 'provider-save-rejected'],
|
|
4650
|
+
description: 'Keeps Save gated by dirty, valid and busy state, prefers onSave when present, falls back to getSettingsValue and closes with reason save.',
|
|
4651
|
+
} }],
|
|
4652
|
+
validators: ['save-prefers-provider-hook', 'save-fallback-value-preserved', 'save-closes-with-save-reason', 'dirty-valid-busy-gates-preserved'],
|
|
4653
|
+
affectedPaths: ['provider.onSave', 'provider.getSettingsValue', 'ref.saved$', 'ref.closed$'],
|
|
4654
|
+
submissionImpact: 'config-only',
|
|
4655
|
+
destructive: false,
|
|
4656
|
+
requiresConfirmation: false,
|
|
4657
|
+
preconditions: ['settings-value-provider-attached'],
|
|
4658
|
+
},
|
|
4659
|
+
{
|
|
4660
|
+
operationId: 'panel.resetBehavior.set',
|
|
4661
|
+
title: 'Set reset behavior',
|
|
4662
|
+
scope: 'interaction',
|
|
4663
|
+
targetKind: 'resetBehavior',
|
|
4664
|
+
target: { kind: 'resetBehavior', resolver: 'settings-value-provider-reset-contract', ambiguityPolicy: 'fail', required: false },
|
|
4665
|
+
inputSchema: {
|
|
4666
|
+
type: 'object',
|
|
4667
|
+
minProperties: 1,
|
|
4668
|
+
properties: {
|
|
4669
|
+
requireConfirmation: { type: 'boolean' },
|
|
4670
|
+
callProviderReset: { type: 'boolean' },
|
|
4671
|
+
emitResetEvent: { type: 'boolean' },
|
|
4672
|
+
clearSavedStatus: { type: 'boolean' },
|
|
4673
|
+
},
|
|
4674
|
+
},
|
|
4675
|
+
effects: [{ kind: 'compile-domain-patch', handler: 'settings-panel-reset-behavior-set', handlerContract: {
|
|
4676
|
+
reads: ['SettingsValueProvider.reset', 'SettingsPanelRef.reset$', 'ConfirmDialogComponent'],
|
|
4677
|
+
writes: ['provider.reset()', 'SettingsPanelRef.reset$', 'panel.lastSavedAt'],
|
|
4678
|
+
identityKeys: ['config.id', 'provider.reset'],
|
|
4679
|
+
inputSchema: { type: 'object', properties: { requireConfirmation: { type: 'boolean' }, callProviderReset: { type: 'boolean' }, emitResetEvent: { type: 'boolean' } } },
|
|
4680
|
+
failureModes: ['reset-confirmation-missing', 'provider-reset-failed', 'reset-event-not-emitted'],
|
|
4681
|
+
description: 'Preserves Reset as a confirmed shell action that calls the provider reset hook and emits SettingsPanelRef.reset$.',
|
|
4682
|
+
} }],
|
|
4683
|
+
destructive: true,
|
|
4684
|
+
requiresConfirmation: true,
|
|
4685
|
+
validators: ['reset-requires-confirmation', 'reset-calls-provider-reset', 'reset-event-emitted', 'settings-panel-round-trip'],
|
|
4686
|
+
affectedPaths: ['provider.reset', 'ref.reset$', 'panel.lastSavedAt'],
|
|
4687
|
+
submissionImpact: 'config-only',
|
|
4688
|
+
preconditions: ['settings-value-provider-attached', 'confirmation-collected'],
|
|
4689
|
+
},
|
|
4690
|
+
{
|
|
4691
|
+
operationId: 'editor.host.configure',
|
|
4692
|
+
title: 'Configure hosted editor',
|
|
4693
|
+
scope: 'templating',
|
|
4694
|
+
targetKind: 'editorHost',
|
|
4695
|
+
target: { kind: 'editorHost', resolver: 'settings-panel-editor-host', ambiguityPolicy: 'fail', required: true },
|
|
4696
|
+
inputSchema: editorHostSchema,
|
|
4697
|
+
effects: [{ kind: 'compile-domain-patch', handler: 'settings-panel-editor-host-configure', handlerContract: {
|
|
4698
|
+
reads: ['ComponentMetadataRegistry', 'SettingsPanelConfig.content', 'SettingsValueProvider', 'component.authoringManifest'],
|
|
4699
|
+
writes: ['config.content.component', 'config.content.inputs', 'delegatedConsumerPatch'],
|
|
4700
|
+
identityKeys: ['componentId', 'configManifestComponentId'],
|
|
4701
|
+
inputSchema: editorHostSchema,
|
|
4702
|
+
failureModes: ['editor-component-not-registered', 'settings-value-provider-missing', 'consumer-manifest-required', 'consumer-config-boundary-violation'],
|
|
4703
|
+
description: 'Configures the hosted editor component and input envelope while delegating consumer-specific config edits to the owning component manifest.',
|
|
4704
|
+
} }],
|
|
4705
|
+
validators: ['editor-component-registered', 'settings-value-provider-contract-present', 'consumer-config-delegated', 'editor-inputs-serializable'],
|
|
4706
|
+
affectedPaths: ['config.content.component', 'config.content.inputs', 'delegatedConsumerPatch'],
|
|
4707
|
+
submissionImpact: 'config-only',
|
|
4708
|
+
destructive: false,
|
|
4709
|
+
requiresConfirmation: false,
|
|
4710
|
+
preconditions: ['component-metadata-resolved'],
|
|
4711
|
+
},
|
|
4712
|
+
{
|
|
4713
|
+
operationId: 'diagnostics.visibility.set',
|
|
4714
|
+
title: 'Set panel diagnostics visibility',
|
|
4715
|
+
scope: 'interaction',
|
|
4716
|
+
targetKind: 'diagnostics',
|
|
4717
|
+
target: { kind: 'diagnostics', resolver: 'settings-panel-state-diagnostics', ambiguityPolicy: 'fail', required: false },
|
|
4718
|
+
inputSchema: {
|
|
4719
|
+
type: 'object',
|
|
4720
|
+
minProperties: 1,
|
|
4721
|
+
properties: {
|
|
4722
|
+
showStatusMessage: { type: 'boolean' },
|
|
4723
|
+
showDisabledReason: { type: 'boolean' },
|
|
4724
|
+
showBusyState: { type: 'boolean' },
|
|
4725
|
+
exposeValidationState: { type: 'boolean' },
|
|
4726
|
+
},
|
|
4727
|
+
},
|
|
4728
|
+
effects: [{ kind: 'merge-object', path: 'config.diagnostics' }],
|
|
4729
|
+
validators: ['diagnostics-follow-provider-state', 'diagnostics-i18n-compatible', 'busy-valid-dirty-visible-when-needed', 'settings-panel-round-trip'],
|
|
4730
|
+
affectedPaths: [
|
|
4731
|
+
'config.diagnostics.showStatusMessage',
|
|
4732
|
+
'config.diagnostics.showDisabledReason',
|
|
4733
|
+
'config.diagnostics.showBusyState',
|
|
4734
|
+
'config.diagnostics.exposeValidationState',
|
|
4735
|
+
'panel.statusMessage',
|
|
4736
|
+
'panel.disabledReason',
|
|
4737
|
+
'panel.isDirty',
|
|
4738
|
+
'panel.isValid',
|
|
4739
|
+
'panel.isBusy',
|
|
4740
|
+
],
|
|
4741
|
+
submissionImpact: 'visual-only',
|
|
4742
|
+
destructive: false,
|
|
4743
|
+
requiresConfirmation: false,
|
|
4744
|
+
preconditions: ['settings-value-provider-attached'],
|
|
4745
|
+
},
|
|
4746
|
+
],
|
|
4747
|
+
validators: [
|
|
4748
|
+
{ validatorId: 'panel-id-stable', level: 'error', code: 'SETTINGS_PANEL_ID_STABLE', description: 'Panel id must remain stable for replacement, persistence and diagnostics.' },
|
|
4749
|
+
{ validatorId: 'replacement-mediates-before-close', level: 'error', code: 'SETTINGS_PANEL_REPLACEMENT_MEDIATES_CLOSE', description: 'Opening a replacement panel must consult the current editor onBeforeClose before closing.' },
|
|
4750
|
+
{ validatorId: 'title-i18n-compatible', level: 'warning', code: 'SETTINGS_PANEL_TITLE_I18N_COMPATIBLE', description: 'Authoring chrome text must remain compatible with the settings panel i18n namespace.' },
|
|
4751
|
+
{ validatorId: 'panel-size-safe', level: 'error', code: 'SETTINGS_PANEL_SIZE_SAFE', description: 'Panel sizes must be finite numbers or safe CSS size strings.' },
|
|
4752
|
+
{ validatorId: 'panel-min-max-consistent', level: 'error', code: 'SETTINGS_PANEL_MIN_MAX_CONSISTENT', description: 'Minimum width must not exceed maximum width.' },
|
|
4753
|
+
{ validatorId: 'resize-persistence-explicit', level: 'error', code: 'SETTINGS_PANEL_RESIZE_PERSISTENCE_EXPLICIT', description: 'Persisted resize must use a stable persistSizeKey or be explicitly transient.' },
|
|
4754
|
+
{ validatorId: 'apply-requires-provider-value', level: 'error', code: 'SETTINGS_PANEL_APPLY_REQUIRES_PROVIDER_VALUE', description: 'Apply must obtain payloads from SettingsValueProvider.getSettingsValue().' },
|
|
4755
|
+
{ validatorId: 'apply-does-not-close-panel', level: 'error', code: 'SETTINGS_PANEL_APPLY_DOES_NOT_CLOSE', description: 'Apply emits preview payloads without closing the panel.' },
|
|
4756
|
+
{ validatorId: 'dirty-valid-busy-gates-preserved', level: 'error', code: 'SETTINGS_PANEL_STATE_GATES_PRESERVED', description: 'Apply and Save remain gated by dirty, valid and busy state.' },
|
|
4757
|
+
{ validatorId: 'save-prefers-provider-hook', level: 'error', code: 'SETTINGS_PANEL_SAVE_PREFERS_PROVIDER_HOOK', description: 'Save must call onSave when provided before falling back to getSettingsValue().' },
|
|
4758
|
+
{ validatorId: 'save-fallback-value-preserved', level: 'error', code: 'SETTINGS_PANEL_SAVE_FALLBACK_PRESERVED', description: 'Save fallback must preserve getSettingsValue payload semantics.' },
|
|
4759
|
+
{ validatorId: 'save-closes-with-save-reason', level: 'error', code: 'SETTINGS_PANEL_SAVE_CLOSE_REASON', description: 'Successful save must emit saved$ and close with reason save.' },
|
|
4760
|
+
{ validatorId: 'reset-requires-confirmation', level: 'error', code: 'SETTINGS_PANEL_RESET_REQUIRES_CONFIRMATION', description: 'Reset is destructive and must remain confirmed before provider reset is called.' },
|
|
4761
|
+
{ validatorId: 'reset-calls-provider-reset', level: 'error', code: 'SETTINGS_PANEL_RESET_CALLS_PROVIDER', description: 'Reset must call the hosted provider reset hook when present.' },
|
|
4762
|
+
{ validatorId: 'reset-event-emitted', level: 'error', code: 'SETTINGS_PANEL_RESET_EVENT_EMITTED', description: 'Reset must emit SettingsPanelRef.reset$ so hosts can coordinate state.' },
|
|
4763
|
+
{ validatorId: 'editor-component-registered', level: 'error', code: 'SETTINGS_PANEL_EDITOR_REGISTERED', description: 'Hosted editor component must resolve from governed component metadata or host registration.' },
|
|
4764
|
+
{ validatorId: 'settings-value-provider-contract-present', level: 'error', code: 'SETTINGS_PANEL_PROVIDER_CONTRACT_PRESENT', description: 'Hosted authoring editors must implement SettingsValueProvider state and value contract.' },
|
|
4765
|
+
{ validatorId: 'consumer-config-delegated', level: 'error', code: 'SETTINGS_PANEL_CONSUMER_CONFIG_DELEGATED', description: 'Consumer-specific config operations must delegate to the owning component manifest.' },
|
|
4766
|
+
{ validatorId: 'editor-inputs-serializable', level: 'error', code: 'SETTINGS_PANEL_EDITOR_INPUTS_SERIALIZABLE', description: 'Persisted editor host inputs must be serializable safe values.' },
|
|
4767
|
+
{ validatorId: 'diagnostics-follow-provider-state', level: 'error', code: 'SETTINGS_PANEL_DIAGNOSTICS_PROVIDER_STATE', description: 'Diagnostics must reflect provider dirty, valid and busy state.' },
|
|
4768
|
+
{ validatorId: 'diagnostics-i18n-compatible', level: 'warning', code: 'SETTINGS_PANEL_DIAGNOSTICS_I18N_COMPATIBLE', description: 'Diagnostics copy must use the settings panel i18n namespace.' },
|
|
4769
|
+
{ validatorId: 'busy-valid-dirty-visible-when-needed', level: 'error', code: 'SETTINGS_PANEL_STATE_VISIBLE', description: 'Busy, invalid and dirty states must remain visible or explain disabled actions.' },
|
|
4770
|
+
{ validatorId: 'settings-panel-round-trip', level: 'error', code: 'SETTINGS_PANEL_ROUND_TRIP', description: 'Open, edit, apply, save, reset and reopen must preserve the shell protocol without mutating consumer config semantics.' },
|
|
4771
|
+
],
|
|
4772
|
+
roundTripRequirements: [
|
|
4773
|
+
'SettingsPanelConfig owns only shell fields: identity, title, size, resize persistence and hosted editor envelope.',
|
|
4774
|
+
'SettingsValueProvider owns apply/save/reset payload extraction, while consumer config semantics stay delegated to the owning component manifest.',
|
|
4775
|
+
'Apply must emit applied$ without closing; Save must emit saved$ and close with reason save; Reset must be confirmed and emit reset$.',
|
|
4776
|
+
'Busy, dirty and valid state must gate Apply and Save consistently and remain visible through diagnostics.',
|
|
4777
|
+
'Opening a replacement panel must pass through the current editor onBeforeClose and dirty-discard mediation.',
|
|
4778
|
+
],
|
|
4779
|
+
examples: [
|
|
4780
|
+
{ id: 'open-component-editor', request: 'Open the table settings editor in the settings panel.', operationId: 'editor.host.configure', params: { componentId: 'praxis-table', inputs: { tableId: 'orders' }, configManifestComponentId: 'praxis-table', editorContract: 'SettingsValueProvider' }, isPositive: true },
|
|
4781
|
+
{ id: 'start-expanded', request: 'Open this settings panel expanded.', operationId: 'panel.openMode.set', params: { expanded: true }, isPositive: true },
|
|
4782
|
+
{ id: 'set-resizable-width', request: 'Make the settings drawer resizable between 420px and 960px.', operationId: 'panel.size.set', params: { resizable: true, minWidth: '420px', maxWidth: '960px', persistSizeKey: 'settings-panel:orders' }, isPositive: true },
|
|
4783
|
+
{ id: 'apply-preview', request: 'Apply the editor change without saving or closing.', operationId: 'panel.applyBehavior.set', params: { requireDirty: true, requireValid: true, blockWhileBusy: true }, isPositive: true },
|
|
4784
|
+
{ id: 'save-and-close', request: 'Save this editor value and close the panel.', operationId: 'panel.saveBehavior.set', params: { requireDirty: true, requireValid: true, blockWhileBusy: true, useProviderHook: true, closeAfterSave: true }, isPositive: true },
|
|
4785
|
+
{ id: 'reset-to-original', request: 'Reset this editor to its original value.', operationId: 'panel.resetBehavior.set', params: { requireConfirmation: true, callProviderReset: true, emitResetEvent: true }, isPositive: true },
|
|
4786
|
+
{ id: 'show-busy-diagnostics', request: 'Show why Apply and Save are disabled while the editor is busy.', operationId: 'diagnostics.visibility.set', params: { showStatusMessage: true, showDisabledReason: true, showBusyState: true }, isPositive: true },
|
|
4787
|
+
{ id: 'reject-table-column-direct-edit', request: 'Use settings-panel to rename a table column directly.', operationId: 'editor.host.configure', params: { componentId: 'praxis-settings-panel', inputs: { columns: [{ field: 'name', label: 'Name' }] } }, isPositive: false },
|
|
4788
|
+
{ id: 'reject-missing-provider', request: 'Host a component that has no dirty, valid, busy or getSettingsValue contract.', operationId: 'editor.host.configure', params: { componentId: 'plain-info-card' }, isPositive: false },
|
|
4789
|
+
{ id: 'reject-reset-without-confirmation', request: 'Reset the editor immediately without confirmation.', operationId: 'panel.resetBehavior.set', params: { requireConfirmation: false, callProviderReset: true }, isPositive: false },
|
|
4790
|
+
],
|
|
4791
|
+
};
|
|
4792
|
+
|
|
4447
4793
|
/**
|
|
4448
4794
|
* Generated bundle index. Do not edit.
|
|
4449
4795
|
*/
|
|
4450
4796
|
|
|
4451
|
-
export { BASE_SIDE_PANEL_DATA, BASE_SIDE_PANEL_REF, BaseSidePanelComponent, BaseSidePanelOverlayRef, BaseSidePanelService, DeferredSettingsPanelRef, GLOBAL_CONFIG_DYNAMIC_FORM_COMPONENT, GlobalConfigAdminService, GlobalConfigEditorComponent, SETTINGS_PANEL_AI_CAPABILITIES, SETTINGS_PANEL_DATA, SETTINGS_PANEL_REF, SIDE_PANEL_THEME_CSS_VARS, SettingsPanelComponent, SettingsPanelRef, SettingsPanelService, SurfaceDrawerComponent, buildGlobalConfigFormConfig, openGlobalConfigEditor, providePraxisSettingsPanelBridge, providePraxisSurfaceDrawerBridge };
|
|
4797
|
+
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, SETTINGS_PANEL_AI_CAPABILITIES, SETTINGS_PANEL_DATA, SETTINGS_PANEL_REF, SIDE_PANEL_THEME_CSS_VARS, SettingsPanelComponent, SettingsPanelRef, SettingsPanelService, SurfaceDrawerComponent, buildGlobalConfigFormConfig, openGlobalConfigEditor, providePraxisSettingsPanelBridge, providePraxisSurfaceDrawerBridge };
|
package/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { Type, Injector, ComponentRef, Provider, ChangeDetectorRef, InjectionTok
|
|
|
3
3
|
import * as rxjs from 'rxjs';
|
|
4
4
|
import { Observable, BehaviorSubject } from 'rxjs';
|
|
5
5
|
import { OverlayRef, Overlay } from '@angular/cdk/overlay';
|
|
6
|
-
import { PraxisI18nService, GlobalConfig, FormConfig, FormValueChangeEvent, AiCapabilityCategory, AiValueKind, AiCapability, AiCapabilityCatalog } from '@praxisui/core';
|
|
6
|
+
import { PraxisI18nService, GlobalConfig, FormConfig, FormValueChangeEvent, AiCapabilityCategory, AiValueKind, AiCapability, AiCapabilityCatalog, ComponentAuthoringManifest } from '@praxisui/core';
|
|
7
7
|
import { MatDialog } from '@angular/material/dialog';
|
|
8
8
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
9
9
|
import { AiProviderCatalogItem } from '@praxisui/ai';
|
|
@@ -19,11 +19,18 @@ interface SettingsPanelConfig {
|
|
|
19
19
|
persistSizeKey?: string;
|
|
20
20
|
minWidth?: string;
|
|
21
21
|
maxWidth?: string;
|
|
22
|
+
diagnostics?: SettingsPanelDiagnosticsConfig;
|
|
22
23
|
content: {
|
|
23
24
|
component: Type<any>;
|
|
24
25
|
inputs?: Record<string, any>;
|
|
25
26
|
};
|
|
26
27
|
}
|
|
28
|
+
interface SettingsPanelDiagnosticsConfig {
|
|
29
|
+
showStatusMessage?: boolean;
|
|
30
|
+
showDisabledReason?: boolean;
|
|
31
|
+
showBusyState?: boolean;
|
|
32
|
+
exposeValidationState?: boolean;
|
|
33
|
+
}
|
|
27
34
|
interface SettingsValueProvider {
|
|
28
35
|
/**
|
|
29
36
|
* Retorna o valor atual das configurações para ser salvo/aplicado
|
|
@@ -392,6 +399,7 @@ declare class SettingsPanelComponent {
|
|
|
392
399
|
isDirty: boolean;
|
|
393
400
|
isValid: boolean;
|
|
394
401
|
isBusy: boolean;
|
|
402
|
+
diagnostics: Required<SettingsPanelDiagnosticsConfig>;
|
|
395
403
|
private lastSavedAt;
|
|
396
404
|
private activePointerId;
|
|
397
405
|
private dragStartX;
|
|
@@ -407,7 +415,10 @@ declare class SettingsPanelComponent {
|
|
|
407
415
|
get resizeHandleLabel(): string;
|
|
408
416
|
get canSave(): boolean;
|
|
409
417
|
get disabledReason(): string;
|
|
410
|
-
get
|
|
418
|
+
get applySaveDisabledReason(): string;
|
|
419
|
+
get showStatusMessage(): boolean;
|
|
420
|
+
get showBusyIndicator(): boolean;
|
|
421
|
+
get statusTone(): 'busy' | 'dirty' | 'invalid' | 'saved' | 'idle';
|
|
411
422
|
get statusMessage(): string;
|
|
412
423
|
tx(text: string, params?: Record<string, string | number | boolean | null | undefined>): string;
|
|
413
424
|
attachContent(component: Type<any>, injector: Injector, ref: SettingsPanelRef, inputs?: Record<string, unknown>): void;
|
|
@@ -419,6 +430,7 @@ declare class SettingsPanelComponent {
|
|
|
419
430
|
private emitSave;
|
|
420
431
|
private formatClock;
|
|
421
432
|
initializeLayout(state: SettingsPanelLayoutState): void;
|
|
433
|
+
configureDiagnostics(config?: SettingsPanelDiagnosticsConfig): void;
|
|
422
434
|
toggleExpand(): void;
|
|
423
435
|
onResizeHandlePointerDown(event: PointerEvent): void;
|
|
424
436
|
onResizeHandleKeydown(event: KeyboardEvent): void;
|
|
@@ -712,5 +724,7 @@ interface CapabilityCatalog extends AiCapabilityCatalog {
|
|
|
712
724
|
}
|
|
713
725
|
declare const SETTINGS_PANEL_AI_CAPABILITIES: CapabilityCatalog;
|
|
714
726
|
|
|
715
|
-
|
|
716
|
-
|
|
727
|
+
declare const PRAXIS_SETTINGS_PANEL_AUTHORING_MANIFEST: ComponentAuthoringManifest;
|
|
728
|
+
|
|
729
|
+
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, SETTINGS_PANEL_AI_CAPABILITIES, SETTINGS_PANEL_DATA, SETTINGS_PANEL_REF, SIDE_PANEL_THEME_CSS_VARS, SettingsPanelComponent, SettingsPanelRef, SettingsPanelService, SurfaceDrawerComponent, buildGlobalConfigFormConfig, openGlobalConfigEditor, providePraxisSettingsPanelBridge, providePraxisSurfaceDrawerBridge };
|
|
730
|
+
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 };
|
package/package.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@praxisui/settings-panel",
|
|
3
|
-
"version": "8.0.0-beta.
|
|
3
|
+
"version": "8.0.0-beta.21",
|
|
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": "^20.0.0",
|
|
7
7
|
"@angular/core": "^20.0.0",
|
|
8
8
|
"@angular/cdk": "^20.0.0",
|
|
9
9
|
"@angular/material": "^20.0.0",
|
|
10
|
-
"@praxisui/ai": "^8.0.0-beta.
|
|
11
|
-
"@praxisui/core": "^8.0.0-beta.
|
|
12
|
-
"@praxisui/dynamic-fields": "^8.0.0-beta.
|
|
10
|
+
"@praxisui/ai": "^8.0.0-beta.21",
|
|
11
|
+
"@praxisui/core": "^8.0.0-beta.21",
|
|
12
|
+
"@praxisui/dynamic-fields": "^8.0.0-beta.21",
|
|
13
|
+
"rxjs": "~7.8.0"
|
|
13
14
|
},
|
|
14
15
|
"dependencies": {
|
|
15
16
|
"tslib": "^2.3.0"
|