@praxisui/dialog 9.0.6 → 9.0.8

package/README.md

@@ -64,13 +64,33 @@ export class UsersComponent {
 ## Custom Content And Tag Mode
 
 ```ts
-this.dialog.open(CustomerFormComponent, {
-  title: "Edit customer",
-  width: "720px",
-  data: customer,
-});
+import { inject, Injector } from "@angular/core";
+import { PraxisDialog } from "@praxisui/dialog";
+
+export class CustomerPage {
+  private readonly dialog = inject(PraxisDialog);
+  private readonly featureInjector = inject(Injector);
+
+  openCustomer(customer: Customer): void {
+    this.dialog.open(CustomerFormComponent, {
+      title: "Edit customer",
+      width: "720px",
+      data: customer,
+      injector: this.featureInjector,
+    });
+  }
+}
 ```
 
+Pass the feature `Injector` when the dynamic content depends on providers owned
+by a lazy route or feature. If omitted, Dialog derives it from
+`viewContainerRef` and then falls back to the injector that created
+`PraxisDialog`. Metadata-driven `surface.open` dialogs forward their provider's
+feature injector automatically.
+
+`injector` and `viewContainerRef` are runtime-only integration fields. Do not
+persist them in presets, AI-authored configuration or JSON documents.
+
 Use `openByRegistry(id, config)` or `openTemplateById(id, config)` for governed registries. Use `<praxis-dialog>` when the host template controls the shell instead of the overlay service.
 
 ```html
@@ -134,6 +154,8 @@ Component-specific dialog variables remain available for deliberate local custom
 
 `PraxisDialog` configures dialog roles, backdrop behavior, Escape handling, focus restoration and `aria-*` fields. Use `ariaRole: 'alertdialog'` for destructive or blocking confirmations, and always provide a visible title or accessible label.
 
+Overlay sizing is applied to the CDK pane and to the dialog panel. `width` and `height` therefore remain centered when constrained by `minWidth`, `maxWidth`, `minHeight` or `maxHeight` on narrow viewports; hosts should not add local overlay-positioning CSS for this behavior.
+
 Closable dialogs with role `dialog` also expose an accessible close button in the title bar. It follows the same `disableClose` policy as Escape and backdrop interactions. The runtime does not add this shortcut to `alertdialog`, whose explicit governed actions remain the required decision path. Hosts that override `PRAXIS_DIALOG_I18N` may provide `close`; older providers remain compatible and fall back to their localized `cancel` label.
 
 ## Official Links

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-08-19T23:21:15.260Z",
+  "generatedAt": "2026-08-20T18:11:26.392Z",
   "packageName": "@praxisui/dialog",
-  "packageVersion": "9.0.6",
+  "packageVersion": "9.0.8",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,

package/fesm2022/praxisui-dialog.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, EventEmitter, inject, HostBinding, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, ApplicationRef, Injector, TemplateRef, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { InjectionToken, Directive, EventEmitter, inject, HostBinding, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, Injector, ApplicationRef, TemplateRef, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import { Subject, firstValueFrom } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -61,6 +61,7 @@ class PraxisDialogRef {
         this.overlayRef = overlayRef;
     }
     beforeCloseHandler;
+    closePromise;
     setBeforeClose(handler) {
         this.beforeCloseHandler = handler;
     }
@@ -89,7 +90,13 @@ class PraxisDialogRef {
     notifyKeydown(ev) {
         this._keydownEvents.next(ev);
     }
-    async close(result) {
+    close(result) {
+        if (this.closePromise)
+            return this.closePromise;
+        this.closePromise = this.performClose(result);
+        return this.closePromise;
+    }
+    async performClose(result) {
         this._beforeClosed.next(result);
         this._beforeClosed.complete();
         if (this.beforeCloseHandler) {
@@ -240,7 +247,6 @@ class PraxisDialogComponent {
                 if (!this.overlayMode)
                     this.opened.emit();
             });
-            this.scheduleInitialFocus();
         }
         if (this.ariaRole === 'alertdialog') {
             const hasLabel = !!(this.title || this.ariaLabel || this.ariaLabelledBy);
@@ -255,6 +261,10 @@ class PraxisDialogComponent {
             catch { }
         }
     }
+    ngAfterViewInit() {
+        if (this.open)
+            this.scheduleInitialFocus();
+    }
     ngOnChanges(changes) {
         if (changes['open'] && this.open) {
             this.isDisplayed = true;
@@ -330,32 +340,44 @@ class PraxisDialogComponent {
         }
         catch { }
     }
+    /**
+     * Moves focus into the currently materialized panel. Overlay hosts call this
+     * after switching to the overlay template branch and attaching its content.
+     */
+    focusInitialElement() {
+        this.captureFocusOrigin();
+        this.applyInitialFocus();
+    }
     scheduleInitialFocus() {
-        const panel = this.panelEl?.nativeElement;
-        if (!panel)
-            return;
+        this.captureFocusOrigin();
+        queueMicrotask(() => this.applyInitialFocus());
+    }
+    captureFocusOrigin() {
         const prev = document.activeElement;
         if (!this._previouslyFocused && this.restoreFocus)
             this._previouslyFocused = prev;
-        queueMicrotask(() => {
-            try {
-                if (this.autoFocus && this.ariaRole === 'alertdialog') {
-                    // In alertdialog, focus the primary action if present
-                    const focused = this.focusPrimaryAction();
-                    if (focused)
-                        return;
-                }
-                if (this.autoFocusedElement) {
-                    const el = panel.querySelector(this.autoFocusedElement);
-                    el?.focus?.();
+    }
+    applyInitialFocus() {
+        const panel = this.panelEl?.nativeElement;
+        if (!panel || this.autoFocus === false)
+            return;
+        try {
+            if (this.autoFocus && this.ariaRole === 'alertdialog') {
+                // In alertdialog, focus the primary action if present
+                const focused = this.focusPrimaryAction();
+                if (focused)
                     return;
-                }
-                // focus first focusable
-                const focusable = panel.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                (focusable || panel).focus?.();
             }
-            catch { }
-        });
+            if (this.autoFocusedElement) {
+                const el = panel.querySelector(this.autoFocusedElement);
+                el?.focus?.();
+                return;
+            }
+            // focus first focusable
+            const focusable = panel.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            (focusable || panel).focus?.();
+        }
+        catch { }
     }
     _previouslyFocused;
     ngOnDestroy() {
@@ -527,7 +549,7 @@ class PraxisDialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisDialogComponent, isStandalone: true, selector: "praxis-dialog", inputs: { title: "title", actions: "actions", actionsLayout: "actionsLayout", animation: "animation", open: "open", width: "width", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", minHeight: "minHeight", maxHeight: "maxHeight", themeColor: "themeColor", disableClose: "disableClose", hasBackdrop: "hasBackdrop", closeOnBackdropClick: "closeOnBackdropClick", overlayMode: "overlayMode", zIndex: "zIndex", panelClass: "panelClass", backdropClass: "backdropClass", position: "position", autoFocusedElement: "autoFocusedElement", autoFocus: "autoFocus", restoreFocus: "restoreFocus", id: "id", ariaRole: "ariaRole", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", styles: "styles", titleIcon: "titleIcon" }, outputs: { action: "action", close: "close", opened: "opened", afterClosed: "afterClosed" }, host: { properties: { "class": "this.hostClass", "attr.tabindex": "this.tabindex" } }, queries: [{ propertyName: "titleTpl", first: true, predicate: PraxisDialogTitleDirective, descendants: true, read: PraxisDialogTitleDirective }, { propertyName: "actionsTpl", first: true, predicate: PraxisDialogActionsDirective, descendants: true, read: PraxisDialogActionsDirective }, { propertyName: "contentTpl", first: true, predicate: PraxisDialogContentDirective, descendants: true, read: PraxisDialogContentDirective }], viewQueries: [{ propertyName: "contentHost", first: true, predicate: CdkPortalOutlet, descendants: true }, { propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@let _titleId = (id ?? \"praxis-dialog\") + \"-title\";\n\n<ng-template #panelHeader>\n  @if (titleTpl?.templateRef || title || titleIcon || displaysCloseButton) {\n    <div class=\"pdx-dialog__title\">\n      <div class=\"pdx-dialog__title-row\">\n        @if (titleTpl?.templateRef) {\n          <div class=\"pdx-dialog__title-custom\">\n            <ng-container\n              [ngTemplateOutlet]=\"titleTpl!.templateRef\"\n            ></ng-container>\n          </div>\n        } @else {\n          @if (titleIcon) {\n            <mat-icon\n              class=\"pdx-dialog__title-icon\"\n              [praxisIcon]=\"titleIcon\"\n              aria-hidden=\"true\"\n            ></mat-icon>\n          }\n          @if (title) {\n            <h2 class=\"pdx-dialog__title-text\" [attr.id]=\"_titleId\">\n              {{ title }}\n            </h2>\n          }\n        }\n        @if (displaysCloseButton) {\n          <button\n            type=\"button\"\n            class=\"pdx-dialog__close-btn\"\n            [attr.aria-label]=\"closeButtonLabel\"\n            [attr.title]=\"closeButtonLabel\"\n            data-testid=\"dialog-close\"\n            (click)=\"requestClose()\"\n          >\n            <mat-icon praxisIcon=\"close\" aria-hidden=\"true\"></mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #panelActions>\n  <div\n    class=\"pdx-dialog__actions\"\n    [class.is-stretched]=\"actionsLayout === 'stretched'\"\n  >\n    @if (actionsTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"actionsTpl!.templateRef\"></ng-container>\n    } @else {\n      @for (a of actions; track a?.id ?? a) {\n        <button\n          type=\"button\"\n          class=\"pdx-dialog__action-btn\"\n          [attr.data-testid]=\"a.id || null\"\n          [attr.data-role]=\"a.role || null\"\n          [attr.data-theme]=\"a.themeColor || null\"\n          [attr.data-fill]=\"a.fillMode || null\"\n          [ngClass]=\"a.cssClass\"\n          (click)=\"onActionClick(a)\"\n          [attr.cdkFocusInitial]=\"\n            a.role === 'primary' && ariaRole === 'alertdialog' ? '' : null\n          \"\n        >\n          @if (a.icon) {\n            <mat-icon [praxisIcon]=\"a.icon\"></mat-icon>\n          } @else if (a.svgIcon) {\n            <mat-icon [svgIcon]=\"a.svgIcon\"></mat-icon>\n          }\n          {{ a.text }}\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n@if (overlayMode) {\n  <div\n    #panel\n    class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{\n      actionsLayout\n    }}\"\n    [attr.role]=\"ariaRole\"\n    [attr.id]=\"id || null\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || (title ? _titleId : null)\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    (keydown)=\"onKeydown($event)\"\n    cdkTrapFocus\n    [ngClass]=\"panelNgClass\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    [class.has-actions]=\"(actions.length || 0) > 0 || !!actionsTpl?.templateRef\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n    <div class=\"pdx-dialog__content\">\n      @if (contentTpl?.templateRef) {\n        <ng-container\n          [ngTemplateOutlet]=\"contentTpl!.templateRef\"\n        ></ng-container>\n      } @else {\n        <ng-template cdkPortalOutlet></ng-template>\n      }\n    </div>\n    <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n  </div>\n} @else {\n  <div\n    class=\"pdx-dialog-overlay\"\n    [class.has-backdrop]=\"hasBackdrop\"\n    [hidden]=\"!isDisplayed\"\n    (click)=\"onBackdrop($event)\"\n    [ngClass]=\"backdropClass\"\n    [style.z-index]=\"zIndex\"\n  >\n    <div class=\"pdx-dialog-shell\" (click)=\"$event.stopPropagation()\">\n      <div\n        #panel\n        class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{\n          actionsLayout\n        }}\"\n        [attr.role]=\"ariaRole\"\n        [attr.id]=\"id || null\"\n        [attr.aria-modal]=\"true\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || (title ? _titleId : null)\"\n        [attr.aria-describedby]=\"ariaDescribedBy || null\"\n        (keydown)=\"onKeydown($event)\"\n        cdkTrapFocus\n        [ngClass]=\"panelNgClass\"\n        [style.width]=\"width\"\n        [style.height]=\"height\"\n        [style.min-width]=\"minWidth\"\n        [style.max-width]=\"maxWidth\"\n        [style.min-height]=\"minHeight\"\n        [style.max-height]=\"maxHeight\"\n        [style.top]=\"position?.top || null\"\n        [style.bottom]=\"position?.bottom || null\"\n        [style.left]=\"position?.left || null\"\n        [style.right]=\"position?.right || null\"\n        [class.pdx-has-position]=\"position\"\n        [class.has-actions]=\"\n          (actions.length || 0) > 0 || !!actionsTpl?.templateRef\n        \"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n        <div class=\"pdx-dialog__content\">\n          @if (contentTpl?.templateRef) {\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl!.templateRef\"\n            ></ng-container>\n          } @else {\n            <ng-template cdkPortalOutlet></ng-template>\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.pdx-dialog-host{--pdx-dialog-bg: var(--praxis-theme-surface, var(--md-sys-color-surface));--pdx-dialog-surface: var( --praxis-theme-surface-overlay, var(--md-sys-color-surface-container-high) );--pdx-dialog-border: var( --praxis-theme-outline, var(--md-sys-color-outline-variant) );--pdx-dialog-title-fg: var( --praxis-theme-on-surface, var(--md-sys-color-on-surface) );--pdx-dialog-elevation: var( --praxis-theme-elevation, var(--mat-elevation-level4) )}.pdx-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--praxis-layer-dialog, 1300);background:transparent}.pdx-dialog-overlay.has-backdrop{background:var(--pdx-dialog-backdrop, rgba(0, 0, 0, .6))}.pdx-dialog-shell{display:contents}.pdx-dialog.pdx-has-position{position:absolute}.pdx-dialog{background:var(--pdx-dialog-container-color, var(--pdx-dialog-surface));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface, #111));border:1px solid var(--pdx-dialog-border);border-radius:var(--pdx-dialog-shape, 16px);box-shadow:var(--pdx-dialog-elevation-shadow, var(--pdx-dialog-elevation));max-width:var(--pdx-dialog-max-width, 90vw);max-height:var(--pdx-dialog-max-height, 80vh);display:flex;flex-direction:column;min-width:var(--pdx-dialog-min-width, 280px);outline:0}.pdx-dialog__title{padding:var(--pdx-dialog-headline-padding, 12px 24px 10px);border-bottom:1px solid var(--pdx-dialog-border);color:var(--pdx-dialog-subhead-color, var(--pdx-dialog-title-fg));background:var(--pdx-dialog-title-bg, transparent);flex:0 0 auto}.pdx-dialog__title-row{display:flex;align-items:center;gap:10px;min-height:40px}.pdx-dialog__title-custom,.pdx-dialog__title-text{min-width:0;flex:1 1 auto}.pdx-dialog__title-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;font-size:20px;line-height:1;opacity:.87}.pdx-dialog__title-text{margin:0;font-family:var(--pdx-dialog-subhead-font, inherit);font-size:var(--pdx-dialog-subhead-size, 16px);letter-spacing:var(--pdx-dialog-subhead-tracking, normal);font-weight:var(--pdx-dialog-subhead-weight, 600);line-height:1.2}.pdx-dialog__close-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;margin:-4px -8px -4px 8px;padding:0;border:0;border-radius:999px;color:inherit;background:transparent;cursor:pointer;transition:background-color .16s ease,color .16s ease}.pdx-dialog__close-btn:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.pdx-dialog__close-btn:focus-visible{outline:2px solid var(--praxis-theme-focus-outline, var(--md-sys-color-primary));outline-offset:2px}.pdx-dialog__close-btn .mat-icon{width:22px;height:22px;font-size:22px;line-height:1}.pdx-dialog__content{padding:var(--pdx-dialog-content-padding, 16px);overflow:auto;flex:1 1 auto;min-height:0;color:var(--pdx-dialog-supporting-text-color, inherit);font-family:var(--pdx-dialog-supporting-text-font, inherit);line-height:var(--pdx-dialog-supporting-text-line-height, 1.4);font-size:var(--pdx-dialog-supporting-text-size, 14px);letter-spacing:var(--pdx-dialog-supporting-text-tracking, normal);font-weight:var(--pdx-dialog-supporting-text-weight, 400)}.pdx-dialog.has-actions .pdx-dialog__content{padding-bottom:var(--pdx-dialog-with-actions-content-padding, var(--pdx-dialog-content-padding, 16px))}.pdx-dialog__actions{display:flex;gap:8px;padding:var(--pdx-dialog-actions-padding, 12px 24px 16px);border-top:1px solid var(--pdx-dialog-border);justify-content:flex-end;align-items:center;background:var(--pdx-dialog-actions-bg, transparent);flex:0 0 auto}.pdx-dialog__actions.is-stretched{justify-content:stretch}.pdx-dialog__actions.is-stretched .pdx-dialog__action-btn{flex:1 1 0;justify-content:center}.pdx-dialog__action-btn{appearance:none;border:1px solid var(--pdx-dialog-border);background:var(--praxis-theme-surface, var(--md-sys-color-surface-container-low));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface));border-radius:var(--pdx-dialog-action-radius, 8px);padding:var(--pdx-dialog-action-padding, 0 14px);min-height:var(--pdx-dialog-action-min-height, 36px);cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.pdx-dialog__action-btn:hover{background:var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container))}.pdx-dialog__action-btn:focus-visible{outline:2px solid var(--praxis-theme-focus-outline, var(--md-sys-color-primary));outline-offset:2px}.pdx-dialog__action-btn:disabled{opacity:.6;cursor:not-allowed}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid]{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid]:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:var(--md-sys-color-primary-container)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid][data-theme=warn],.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]{background:var(--md-sys-color-error);border-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid][data-theme=warn]:hover,.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]:hover{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error-container)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent],.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]{background:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent]:hover,.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]:hover{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-secondary-container)}.pdx-dialog__action-btn[data-fill=outline]{background:transparent;color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface))}.pdx-dialog__action-btn[data-fill=outline][data-theme=primary],.pdx-dialog__action-btn[data-fill=flat][data-theme=primary]{color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=accent],.pdx-dialog__action-btn[data-fill=flat][data-theme=accent]{color:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=warn],.pdx-dialog__action-btn[data-fill=flat][data-theme=warn]{color:var(--md-sys-color-error);border-color:var(--md-sys-color-error)}.pdx-dialog__action-btn[data-fill=flat]{background:transparent;border-color:transparent;color:var(--md-sys-color-primary)}.pdx-dialog__action-btn .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.pdx-dialog--primary .pdx-dialog__title{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-bottom-color:var(--praxis-theme-outline, var(--md-sys-color-outline-variant))}.pdx-dialog--dark{background:var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface))}.pdx-dialog{transform-origin:center;transition-property:transform,opacity;transition-duration:var(--pdx-dialog-anim-duration, .3s);transition-timing-function:var(--pdx-dialog-anim-ease, cubic-bezier(.2, 0, 0, 1))}.pdx-dialog.pdx-anim-fade{opacity:1}.pdx-dialog.pdx-anim-zoom{transform:scale(1)}.pdx-dialog.pdx-anim-translate-up,.pdx-dialog.pdx-anim-translate-down{transform:translateY(0)}.pdx-dialog.pdx-anim-translate-left,.pdx-dialog.pdx-anim-translate-right{transform:translate(0)}.pdx-dialog.pdx-state-opening.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-right{transform:translate(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-right{transform:translate(16px);opacity:0}@media(prefers-reduced-motion:reduce){.pdx-dialog{transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisDialogComponent, isStandalone: true, selector: "praxis-dialog", inputs: { title: "title", actions: "actions", actionsLayout: "actionsLayout", animation: "animation", open: "open", width: "width", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", minHeight: "minHeight", maxHeight: "maxHeight", themeColor: "themeColor", disableClose: "disableClose", hasBackdrop: "hasBackdrop", closeOnBackdropClick: "closeOnBackdropClick", overlayMode: "overlayMode", zIndex: "zIndex", panelClass: "panelClass", backdropClass: "backdropClass", position: "position", autoFocusedElement: "autoFocusedElement", autoFocus: "autoFocus", restoreFocus: "restoreFocus", id: "id", ariaRole: "ariaRole", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", styles: "styles", titleIcon: "titleIcon" }, outputs: { action: "action", close: "close", opened: "opened", afterClosed: "afterClosed" }, host: { properties: { "class": "this.hostClass", "attr.tabindex": "this.tabindex" } }, queries: [{ propertyName: "titleTpl", first: true, predicate: PraxisDialogTitleDirective, descendants: true, read: PraxisDialogTitleDirective }, { propertyName: "actionsTpl", first: true, predicate: PraxisDialogActionsDirective, descendants: true, read: PraxisDialogActionsDirective }, { propertyName: "contentTpl", first: true, predicate: PraxisDialogContentDirective, descendants: true, read: PraxisDialogContentDirective }], viewQueries: [{ propertyName: "contentHost", first: true, predicate: CdkPortalOutlet, descendants: true }, { propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@let _titleId = (id ?? \"praxis-dialog\") + \"-title\";\n\n<ng-template #panelHeader>\n  @if (titleTpl?.templateRef || title || titleIcon || displaysCloseButton) {\n    <div class=\"pdx-dialog__title\">\n      <div class=\"pdx-dialog__title-row\">\n        @if (titleTpl?.templateRef) {\n          <div class=\"pdx-dialog__title-custom\">\n            <ng-container\n              [ngTemplateOutlet]=\"titleTpl!.templateRef\"\n            ></ng-container>\n          </div>\n        } @else {\n          @if (titleIcon) {\n            <mat-icon\n              class=\"pdx-dialog__title-icon\"\n              [praxisIcon]=\"titleIcon\"\n              aria-hidden=\"true\"\n            ></mat-icon>\n          }\n          @if (title) {\n            <h2 class=\"pdx-dialog__title-text\" [attr.id]=\"_titleId\">\n              {{ title }}\n            </h2>\n          }\n        }\n        @if (displaysCloseButton) {\n          <button\n            type=\"button\"\n            class=\"pdx-dialog__close-btn\"\n            [attr.aria-label]=\"closeButtonLabel\"\n            [attr.title]=\"closeButtonLabel\"\n            data-testid=\"dialog-close\"\n            (click)=\"requestClose()\"\n          >\n            <mat-icon praxisIcon=\"close\" aria-hidden=\"true\"></mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #panelActions>\n  <div\n    class=\"pdx-dialog__actions\"\n    [class.is-stretched]=\"actionsLayout === 'stretched'\"\n  >\n    @if (actionsTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"actionsTpl!.templateRef\"></ng-container>\n    } @else {\n      @for (a of actions; track a?.id ?? a) {\n        <button\n          type=\"button\"\n          class=\"pdx-dialog__action-btn\"\n          [attr.data-testid]=\"a.id || null\"\n          [attr.data-role]=\"a.role || null\"\n          [attr.data-theme]=\"a.themeColor || null\"\n          [attr.data-fill]=\"a.fillMode || null\"\n          [ngClass]=\"a.cssClass\"\n          (click)=\"onActionClick(a)\"\n          [attr.cdkFocusInitial]=\"\n            a.role === 'primary' && ariaRole === 'alertdialog' ? '' : null\n          \"\n        >\n          @if (a.icon) {\n            <mat-icon [praxisIcon]=\"a.icon\"></mat-icon>\n          } @else if (a.svgIcon) {\n            <mat-icon [svgIcon]=\"a.svgIcon\"></mat-icon>\n          }\n          {{ a.text }}\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n@if (overlayMode) {\n  <div\n    #panel\n    class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{\n      actionsLayout\n    }}\"\n    [attr.role]=\"ariaRole\"\n    [attr.id]=\"id || null\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || (title ? _titleId : null)\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    (keydown)=\"onKeydown($event)\"\n    cdkTrapFocus\n    [ngClass]=\"panelNgClass\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    [class.has-actions]=\"(actions.length || 0) > 0 || !!actionsTpl?.templateRef\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n    <div class=\"pdx-dialog__content\">\n      @if (contentTpl?.templateRef) {\n        <ng-container\n          [ngTemplateOutlet]=\"contentTpl!.templateRef\"\n        ></ng-container>\n      } @else {\n        <ng-template cdkPortalOutlet></ng-template>\n      }\n    </div>\n    <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n  </div>\n} @else {\n  <div\n    class=\"pdx-dialog-overlay\"\n    [class.has-backdrop]=\"hasBackdrop\"\n    [hidden]=\"!isDisplayed\"\n    (click)=\"onBackdrop($event)\"\n    [ngClass]=\"backdropClass\"\n    [style.z-index]=\"zIndex\"\n  >\n    <div class=\"pdx-dialog-shell\" (click)=\"$event.stopPropagation()\">\n      <div\n        #panel\n        class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{\n          actionsLayout\n        }}\"\n        [attr.role]=\"ariaRole\"\n        [attr.id]=\"id || null\"\n        [attr.aria-modal]=\"true\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy || (title ? _titleId : null)\"\n        [attr.aria-describedby]=\"ariaDescribedBy || null\"\n        (keydown)=\"onKeydown($event)\"\n        cdkTrapFocus\n        [ngClass]=\"panelNgClass\"\n        [style.width]=\"width\"\n        [style.height]=\"height\"\n        [style.min-width]=\"minWidth\"\n        [style.max-width]=\"maxWidth\"\n        [style.min-height]=\"minHeight\"\n        [style.max-height]=\"maxHeight\"\n        [style.top]=\"position?.top || null\"\n        [style.bottom]=\"position?.bottom || null\"\n        [style.left]=\"position?.left || null\"\n        [style.right]=\"position?.right || null\"\n        [class.pdx-has-position]=\"position\"\n        [class.has-actions]=\"\n          (actions.length || 0) > 0 || !!actionsTpl?.templateRef\n        \"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n        <div class=\"pdx-dialog__content\">\n          @if (contentTpl?.templateRef) {\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl!.templateRef\"\n            ></ng-container>\n          } @else {\n            <ng-template cdkPortalOutlet></ng-template>\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.pdx-dialog-host{--pdx-dialog-bg: var(--praxis-theme-surface, var(--md-sys-color-surface));--pdx-dialog-surface: var( --praxis-theme-surface-overlay, var(--md-sys-color-surface-container-high) );--pdx-dialog-border: var( --praxis-theme-outline, var(--md-sys-color-outline-variant) );--pdx-dialog-title-fg: var( --praxis-theme-on-surface, var(--md-sys-color-on-surface) );--pdx-dialog-elevation: var( --praxis-theme-elevation, var(--mat-elevation-level4) )}.pdx-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--praxis-layer-dialog, 1300);background:transparent}.pdx-dialog-overlay.has-backdrop{background:var(--pdx-dialog-backdrop, rgba(0, 0, 0, .6))}.pdx-dialog-shell{display:contents}.pdx-dialog.pdx-has-position{position:absolute}.pdx-dialog{background:var(--pdx-dialog-container-color, var(--pdx-dialog-surface));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface, #111));border:1px solid var(--pdx-dialog-border);border-radius:var(--pdx-dialog-shape, 16px);box-shadow:var(--pdx-dialog-elevation-shadow, var(--pdx-dialog-elevation));max-width:var(--pdx-dialog-max-width, 90vw);max-height:var(--pdx-dialog-max-height, 80vh);display:flex;flex-direction:column;min-width:var(--pdx-dialog-min-width, 280px);outline:0}.pdx-dialog__title{padding:var(--pdx-dialog-headline-padding, 12px 24px 10px);border-bottom:1px solid var(--pdx-dialog-border);color:var(--pdx-dialog-subhead-color, var(--pdx-dialog-title-fg));background:var(--pdx-dialog-title-bg, transparent);flex:0 0 auto}.pdx-dialog__title-row{display:flex;align-items:center;gap:10px;min-height:40px}.pdx-dialog__title-custom,.pdx-dialog__title-text{min-width:0;flex:1 1 auto}.pdx-dialog__title-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;font-size:20px;line-height:1;opacity:.87}.pdx-dialog__title-text{margin:0;font-family:var(--pdx-dialog-subhead-font, inherit);font-size:var(--pdx-dialog-subhead-size, 16px);letter-spacing:var(--pdx-dialog-subhead-tracking, normal);font-weight:var(--pdx-dialog-subhead-weight, 600);line-height:1.2}.pdx-dialog__close-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;margin:-4px -8px -4px 8px;padding:0;border:0;border-radius:999px;color:inherit;background:transparent;cursor:pointer;transition:background-color .16s ease,color .16s ease}.pdx-dialog__close-btn:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.pdx-dialog__close-btn:focus-visible{outline:2px solid var(--praxis-theme-focus-outline, var(--md-sys-color-primary));outline-offset:2px}.pdx-dialog__close-btn .mat-icon{width:22px;height:22px;font-size:22px;line-height:1}.pdx-dialog__content{padding:var(--pdx-dialog-content-padding, 16px);overflow:auto;flex:1 1 auto;min-height:0;color:var(--pdx-dialog-supporting-text-color, inherit);font-family:var(--pdx-dialog-supporting-text-font, inherit);line-height:var(--pdx-dialog-supporting-text-line-height, 1.4);font-size:var(--pdx-dialog-supporting-text-size, 14px);letter-spacing:var(--pdx-dialog-supporting-text-tracking, normal);font-weight:var(--pdx-dialog-supporting-text-weight, 400)}.pdx-dialog.has-actions .pdx-dialog__content{padding-bottom:var(--pdx-dialog-with-actions-content-padding, var(--pdx-dialog-content-padding, 16px))}.pdx-dialog__actions{display:flex;gap:8px;padding:var(--pdx-dialog-actions-padding, 12px 24px 16px);border-top:1px solid var(--pdx-dialog-border);justify-content:flex-end;align-items:center;background:var(--pdx-dialog-actions-bg, transparent);flex:0 0 auto}.pdx-dialog__actions.is-stretched{justify-content:stretch}.pdx-dialog__actions.is-stretched .pdx-dialog__action-btn{flex:1 1 0;justify-content:center}.pdx-dialog__action-btn{appearance:none;border:1px solid var(--pdx-dialog-border);background:var(--praxis-theme-surface, var(--md-sys-color-surface-container-low));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface));border-radius:var(--pdx-dialog-action-radius, 8px);padding:var(--pdx-dialog-action-padding, 0 14px);min-height:var(--pdx-dialog-action-min-height, 36px);cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.pdx-dialog__action-btn:hover{background:var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container))}.pdx-dialog__action-btn:focus-visible{outline:2px solid var(--praxis-theme-focus-outline, var(--md-sys-color-primary));outline-offset:2px}.pdx-dialog__action-btn:disabled{opacity:.6;cursor:not-allowed}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid]{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid]:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:var(--md-sys-color-primary-container)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid][data-theme=warn],.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]{background:var(--md-sys-color-error);border-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid][data-theme=warn]:hover,.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]:hover{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error-container)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent],.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]{background:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent]:hover,.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]:hover{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-secondary-container)}.pdx-dialog__action-btn[data-fill=outline]{background:transparent;color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface))}.pdx-dialog__action-btn[data-fill=outline][data-theme=primary],.pdx-dialog__action-btn[data-fill=flat][data-theme=primary]{color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=accent],.pdx-dialog__action-btn[data-fill=flat][data-theme=accent]{color:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=warn],.pdx-dialog__action-btn[data-fill=flat][data-theme=warn]{color:var(--md-sys-color-error);border-color:var(--md-sys-color-error)}.pdx-dialog__action-btn[data-fill=flat]{background:transparent;border-color:transparent;color:var(--md-sys-color-primary)}.pdx-dialog__action-btn .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.pdx-dialog--primary .pdx-dialog__title{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-bottom-color:var(--praxis-theme-outline, var(--md-sys-color-outline-variant))}.pdx-dialog--dark{background:var(--praxis-theme-surface-raised, var(--md-sys-color-surface-container));color:var(--praxis-theme-on-surface, var(--md-sys-color-on-surface))}.pdx-dialog{transform-origin:center;transition-property:transform,opacity;transition-duration:var(--pdx-dialog-anim-duration, .3s);transition-timing-function:var(--pdx-dialog-anim-ease, cubic-bezier(.2, 0, 0, 1))}.pdx-dialog.pdx-anim-fade{opacity:1}.pdx-dialog.pdx-anim-zoom{transform:scale(1)}.pdx-dialog.pdx-anim-translate-up,.pdx-dialog.pdx-anim-translate-down{transform:translateY(0)}.pdx-dialog.pdx-anim-translate-left,.pdx-dialog.pdx-anim-translate-right{transform:translate(0)}.pdx-dialog.pdx-state-opening.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-right{transform:translate(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-right{transform:translate(16px);opacity:0}@media(prefers-reduced-motion:reduce){.pdx-dialog{transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogComponent, decorators: [{
             type: Component,
@@ -611,7 +633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 args: [CdkPortalOutlet, { static: false }]
             }], panelEl: [{
                 type: ViewChild,
-                args: ['panel', { static: true }]
+                args: ['panel']
             }], titleTpl: [{
                 type: ContentChild,
                 args: [PraxisDialogTitleDirective, {
@@ -638,13 +660,17 @@ const PraxisDialogDirectives = [];
 
 class DialogOverlayService {
     overlay = inject(Overlay);
-    createOverlay(cfg, injector) {
+    defaults = inject(PRAXIS_DIALOG_DEFAULTS);
+    createOverlay(cfg) {
         const overlayConfig = this.buildOverlayConfig(cfg);
         return this.overlay.create(overlayConfig);
     }
     attachContainer(ref, injector) {
         const portal = new ComponentPortal(PraxisDialogComponent, null, injector);
         const compRef = ref.attach(portal);
+        // CDK 21 defers the first position calculation to afterNextRender. Apply the
+        // configured strategy now so dialogs never paint at the viewport origin.
+        ref.updatePosition();
         return compRef;
     }
     buildOverlayConfig(cfg) {
@@ -684,6 +710,10 @@ class DialogOverlayService {
             scrollStrategy,
             width: coerceCssUnit(cfg?.width),
             height: coerceCssUnit(cfg?.height),
+            minWidth: coerceCssUnit(cfg?.minWidth),
+            maxWidth: coerceCssUnit(cfg?.maxWidth ?? this.defaults.maxWidth),
+            minHeight: coerceCssUnit(cfg?.minHeight),
+            maxHeight: coerceCssUnit(cfg?.maxHeight ?? this.defaults.maxHeight),
         });
         if (cfg?.zIndex != null) {
             overlayConfig.zIndex = cfg.zIndex;
@@ -706,6 +736,7 @@ const DialogOverlayImports = [OverlayModule, PortalModule];
 
 class PraxisDialog {
     overlay = inject(DialogOverlayService);
+    injector = inject(Injector);
     layerScale = inject(PraxisLayerScaleStyleService);
     appRef = inject(ApplicationRef);
     registry = inject(PRAXIS_DIALOG_CONTENT_REGISTRY);
@@ -717,14 +748,18 @@ class PraxisDialog {
     afterAllClosed = new Subject();
     afterOpened = new Subject();
     _openDialogs = [];
-    get openDialogs() { return this._openDialogs.slice(); }
+    get openDialogs() {
+        return this._openDialogs.slice();
+    }
     _seq = 0;
     open(content, config) {
         this.layerScale.ensureInstalled();
+        const effectiveInjector = config?.injector ?? config?.viewContainerRef?.injector ?? this.injector;
         const injector = Injector.create({
             providers: [{ provide: PRAXIS_DIALOG_DATA, useValue: config?.data }],
+            parent: effectiveInjector,
         });
-        const overlayRef = this.overlay.createOverlay(config ?? {}, injector);
+        const overlayRef = this.overlay.createOverlay(config ?? {});
         const ref = new PraxisDialogRef(overlayRef);
         // Auto-id fallback if not provided
         let assignedId = config?.id ?? `praxis-dialog-${++this._seq}`;
@@ -739,10 +774,14 @@ class PraxisDialog {
         // Set inputs before detectChanges so the correct branch/materialization occurs
         container.overlayMode = true;
         container.title = config?.title;
-        container.titleIcon = config?.icon ?? config?.titleIcon;
+        container.titleIcon =
+            config?.icon ?? config?.titleIcon;
         container.actions = config?.actions ?? [];
         container.actionsLayout = config?.actionsLayout ?? 'stretched';
-        container.animation = config?.animation ?? { type: 'translate', duration: 300 };
+        container.animation = config?.animation ?? {
+            type: 'translate',
+            duration: 300,
+        };
         container.width = config?.width;
         container.height = config?.height;
         container.minWidth = config?.minWidth;
@@ -758,7 +797,8 @@ class PraxisDialog {
         container.backdropClass = config?.backdropClass;
         container.position = config?.position;
         container.autoFocusedElement = config?.autoFocusedElement;
-        container.autoFocus = config?.autoFocus ?? container.autoFocus;
+        container.autoFocus =
+            config?.autoFocus ?? container.autoFocus;
         container.restoreFocus = config?.restoreFocus ?? true;
         container.id = assignedId;
         container.ariaRole = config?.ariaRole ?? 'dialog';
@@ -813,16 +853,20 @@ class PraxisDialog {
                 return;
             contentAttached = true;
             if (content instanceof TemplateRef) {
-                const origin = config?.viewContainerRef ?? null;
-                const portal = new TemplatePortal(content, origin, { $implicit: config?.data });
+                const origin = config?.viewContainerRef ??
+                    null;
+                const portal = new TemplatePortal(content, origin, {
+                    $implicit: config?.data,
+                });
                 container.contentHost.attachTemplatePortal(portal);
             }
             else {
-                const portal = new ComponentPortal(content);
+                const portal = new ComponentPortal(content, config?.viewContainerRef ?? null, injector);
                 const innerRef = container.contentHost.attachComponentPortal(portal);
                 ref.componentInstance = innerRef.instance;
                 ref.componentRef = innerRef;
             }
+            container.focusInitialElement();
         };
         if (container.contentHost) {
             doAttach();
@@ -864,8 +908,20 @@ class PraxisDialog {
     confirm(cfg, variant) {
         const merged = this.mergePresets('confirm', variant, cfg);
         const actions = [
-            { text: merged.cancelLabel ?? this.i18n.cancel, role: 'secondary', close: true, id: 'cancel', payload: false },
-            { text: merged.confirmLabel ?? this.i18n.ok, role: 'primary', close: true, id: 'confirm', payload: true },
+            {
+                text: merged.cancelLabel ?? this.i18n.cancel,
+                role: 'secondary',
+                close: true,
+                id: 'cancel',
+                payload: false,
+            },
+            {
+                text: merged.confirmLabel ?? this.i18n.ok,
+                role: 'primary',
+                close: true,
+                id: 'confirm',
+                payload: true,
+            },
         ];
         const Comp = SimpleDialogContentComponent;
         return this.open(Comp, {
@@ -878,21 +934,53 @@ class PraxisDialog {
     alert(cfg) {
         const merged = this.mergePresets('alert', undefined, cfg);
         const actions = [
-            { text: merged.okLabel ?? this.i18n.ok, role: 'primary', close: true, id: 'ok' },
+            {
+                text: merged.okLabel ?? this.i18n.ok,
+                role: 'primary',
+                close: true,
+                id: 'ok',
+            },
         ];
         const Comp = SimpleDialogContentComponent;
-        return this.open(Comp, { ...merged, actions, data: { message: merged.message, mode: 'alert' }, ariaRole: merged.ariaRole ?? 'alertdialog' });
+        return this.open(Comp, {
+            ...merged,
+            actions,
+            data: { message: merged.message, mode: 'alert' },
+            ariaRole: merged.ariaRole ?? 'alertdialog',
+        });
     }
     prompt(cfg) {
         const merged = this.mergePresets('prompt', undefined, cfg);
         const actions = [
-            { text: merged.cancelLabel ?? this.i18n.cancel, role: 'secondary', close: true, id: 'cancel', payload: null },
-            { text: merged.okLabel ?? this.i18n.ok, role: 'primary', close: false, id: 'ok' },
+            {
+                text: merged.cancelLabel ?? this.i18n.cancel,
+                role: 'secondary',
+                close: true,
+                id: 'cancel',
+                payload: null,
+            },
+            {
+                text: merged.okLabel ?? this.i18n.ok,
+                role: 'primary',
+                close: false,
+                id: 'ok',
+            },
         ];
         const Comp = SimpleDialogContentComponent;
-        const ref = this.open(Comp, { ...merged, actions, data: { message: merged.message, mode: 'prompt', placeholder: merged.placeholder, defaultValue: merged.defaultValue }, ariaRole: merged.ariaRole ?? 'dialog' });
+        const ref = this.open(Comp, {
+            ...merged,
+            actions,
+            data: {
+                message: merged.message,
+                mode: 'prompt',
+                placeholder: merged.placeholder,
+                defaultValue: merged.defaultValue,
+            },
+            ariaRole: merged.ariaRole ?? 'dialog',
+        });
         ref.afterOpened().subscribe(() => {
-            const inst = ref.componentInstance;
+            const inst = ref
+                .componentInstance;
             inst.submit = () => ref.close(inst.value ?? '');
         });
         return ref;
@@ -917,7 +1005,9 @@ class PraxisDialog {
     }
     mergePresets(type, variant, cfg) {
         const base = this.globalPresets?.[type] ?? {};
-        const variantCfg = variant ? (this.globalPresets?.variants?.[variant] ?? {}) : {};
+        const variantCfg = variant
+            ? (this.globalPresets?.variants?.[variant] ?? {})
+            : {};
         return mergeDialogConfig(mergeDialogConfig(base, variantCfg), cfg);
     }
     closeAll() {
@@ -940,7 +1030,9 @@ class SimpleDialogContentComponent {
     placeholder;
     value;
     submit;
-    dialogData = inject(PRAXIS_DIALOG_DATA, { optional: true });
+    dialogData = inject(PRAXIS_DIALOG_DATA, {
+        optional: true,
+    });
     constructor() {
         const data = this.dialogData;
         try {
@@ -964,7 +1056,7 @@ class SimpleDialogContentComponent {
         </mat-form-field>
       }
     </div>
-    `, isInline: true, styles: [".pdx-simple-dialog{display:grid;gap:12px}.pdx-simple-dialog__message{margin:0}.pdx-simple-dialog__field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+  `, isInline: true, styles: [".pdx-simple-dialog{display:grid;gap:12px}.pdx-simple-dialog__message{margin:0}.pdx-simple-dialog__field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SimpleDialogContentComponent, decorators: [{
             type: Component,
@@ -980,7 +1072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </mat-form-field>
       }
     </div>
-    `, styles: [".pdx-simple-dialog{display:grid;gap:12px}.pdx-simple-dialog__message{margin:0}.pdx-simple-dialog__field{width:100%}\n"] }]
+  `, styles: [".pdx-simple-dialog{display:grid;gap:12px}.pdx-simple-dialog__message{margin:0}.pdx-simple-dialog__field{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 class SimpleHtmlDialogContentComponent {
     safeHtml;
@@ -1156,7 +1248,7 @@ function providePraxisDialogGlobalActions() {
     };
 }
 
-function buildDialogConfig(payload) {
+function buildDialogConfig(payload, injector) {
     return {
         title: payload.title,
         titleIcon: payload.icon,
@@ -1166,6 +1258,7 @@ function buildDialogConfig(payload) {
         maxWidth: payload.size?.maxWidth,
         minHeight: payload.size?.minHeight,
         maxHeight: payload.size?.maxHeight,
+        injector,
     };
 }
 function buildHostInputs(payload, context, options) {
@@ -1194,7 +1287,9 @@ function buildDialogSurfaceRuntime(ref, resultSubject, complete) {
         result$: resultSubject.asObservable(),
         emitResult: (result) => resultSubject.next(result),
         complete,
-        close: (result) => { void ref.close(result); },
+        close: (result) => {
+            void ref.close(result);
+        },
         updateSize: (preset) => {
             const width = resolveDialogWidth(preset);
             if (width) {
@@ -1248,7 +1343,8 @@ function bindSurfaceHostSelectionResults(instance, resultSubject) {
     return () => subscriptions.forEach((unsubscribe) => unsubscribe());
 }
 function subscribeToOutput(output, handler) {
-    if (!output || typeof output.subscribe !== 'function') {
+    if (!output ||
+        typeof output.subscribe !== 'function') {
         return null;
     }
     const subscription = output.subscribe(handler);
@@ -1263,9 +1359,9 @@ function toSurfaceSelectionResult(output, payload) {
     };
 }
 function resolveParentSurfaceRuntime(context) {
-    const runtime = context?.runtime?.state?.surfaceRuntime
-        || context?.payload?.surfaceContext?.surfaceRuntime
-        || context?.pageContext?.surfaceRuntime;
+    const runtime = context?.runtime?.state?.surfaceRuntime ||
+        context?.payload?.surfaceContext?.surfaceRuntime ||
+        context?.pageContext?.surfaceRuntime;
     return runtime && typeof runtime === 'object'
         ? runtime
         : null;
@@ -1276,11 +1372,10 @@ function resolveParentSurfaceRuntime(context) {
  * control after the surface terminates.
  */
 function resolveRuntimeFocusOrigin(context) {
-    const candidate = context?.runtime
-        ?.focusOrigin;
-    return candidate
-        && typeof candidate.focus === 'function'
-        && (candidate.isConnected || !!candidate.getAttribute('data-praxis-focus-key'))
+    const candidate = context?.runtime?.focusOrigin;
+    return candidate &&
+        typeof candidate.focus === 'function' &&
+        (candidate.isConnected || !!candidate.getAttribute('data-praxis-focus-key'))
         ? candidate
         : null;
 }
@@ -1292,9 +1387,7 @@ function resolveReplacementFocusOrigin(focusOrigin) {
     if (!key || typeof document === 'undefined') {
         return null;
     }
-    return Array.from(document.querySelectorAll('[data-praxis-focus-key]'))
-        .find((candidate) => candidate.getAttribute('data-praxis-focus-key') === key)
-        ?? null;
+    return (Array.from(document.querySelectorAll('[data-praxis-focus-key]')).find((candidate) => candidate.getAttribute('data-praxis-focus-key') === key) ?? null);
 }
 function restoreRuntimeFocusOnClose(closed$, focusOrigin) {
     if (!focusOrigin || typeof closed$?.subscribe !== 'function')
@@ -1303,8 +1396,8 @@ function restoreRuntimeFocusOnClose(closed$, focusOrigin) {
         const restore = (remainingAttempts) => {
             const target = resolveReplacementFocusOrigin(focusOrigin);
             const activeElement = typeof document !== 'undefined' ? document.activeElement : null;
-            const focusWasLostToDocument = activeElement === document.body
-                || activeElement === document.documentElement;
+            const focusWasLostToDocument = activeElement === document.body ||
+                activeElement === document.documentElement;
             const targetAlreadyFocused = activeElement === target;
             if (target && (focusWasLostToDocument || targetAlreadyFocused)) {
                 try {
@@ -1317,12 +1410,12 @@ function restoreRuntimeFocusOnClose(closed$, focusOrigin) {
                     catch { }
                 }
             }
-            if (remainingAttempts > 0
-                && typeof setTimeout !== 'undefined'
+            if (remainingAttempts > 0 &&
+                typeof setTimeout !== 'undefined' &&
                 // A late overlay teardown can return focus to document.body after the
                 // first restore. Keep checking only while focus remains unowned (or
                 // on the restored target); never steal a user-initiated new focus.
-                && (focusWasLostToDocument || targetAlreadyFocused)) {
+                (focusWasLostToDocument || targetAlreadyFocused)) {
                 setTimeout(() => restore(remainingAttempts - 1), 50);
             }
         };
@@ -1337,6 +1430,7 @@ function providePraxisSurfaceGlobalActions() {
         provide: GLOBAL_SURFACE_SERVICE,
         useFactory: () => {
             const dialog = inject(PraxisDialog);
+            const injector = inject(Injector);
             const materializer = inject(SurfaceOpenMaterializerService);
             const logger = inject(LoggerService, { optional: true });
             const surfaceDrawer = inject(SURFACE_DRAWER_BRIDGE, {
@@ -1401,7 +1495,7 @@ function providePraxisSurfaceGlobalActions() {
                         restoreRuntimeFocusOnClose(ref.closed$, focusOrigin);
                         return ref;
                     }
-                    const ref = dialog.open(PraxisSurfaceHostComponent, buildDialogConfig(materializedPayload));
+                    const ref = dialog.open(PraxisSurfaceHostComponent, buildDialogConfig(materializedPayload, injector));
                     restoreRuntimeFocusOnClose(ref.afterClosed(), focusOrigin);
                     const resultSubject = new Subject();
                     let terminalOutcomeEmitted = false;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@praxisui/dialog",
-  "version": "9.0.6",
+  "version": "9.0.8",
   "description": "Dialog helpers and components for Praxis UI with Angular Material integration.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
     "@angular/cdk": "^21.0.0",
     "@angular/forms": "^21.0.0",
-    "@praxisui/core": "^9.0.6",
+    "@praxisui/core": "^9.0.8",
     "@angular/material": "^21.0.0",
     "@angular/platform-browser": "^21.0.0",
     "rxjs": "~7.8.0"

package/types/praxisui-dialog.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, TemplateRef, ComponentRef, OnInit, OnChanges, OnDestroy, EventEmitter, ElementRef, SimpleChanges, Type, Provider } from '@angular/core';
+import { Injector, ViewContainerRef, InjectionToken, TemplateRef, ComponentRef, OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, SimpleChanges, Type, Provider } from '@angular/core';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { Observable, Subject } from 'rxjs';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
@@ -64,7 +64,13 @@ interface PraxisDialogConfig<D = any> {
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
     appendTo?: Element | any;
-    viewContainerRef?: i0.ViewContainerRef;
+    /**
+     * Runtime-only injector used to create the dialog container and its dynamic
+     * content. It takes precedence over the injector derived from
+     * viewContainerRef and must not be persisted or authored as JSON.
+     */
+    injector?: Injector;
+    viewContainerRef?: ViewContainerRef;
     closeOnNavigation?: boolean;
     zIndex?: number;
     styles?: PraxisDialogStyleConfig;
@@ -166,6 +172,7 @@ declare class PraxisDialogRef<T = any, R = any> {
     componentRef?: ComponentRef<T>;
     constructor(overlayRef: OverlayRef);
     private beforeCloseHandler?;
+    private closePromise?;
     setBeforeClose(handler: (result?: R) => Promise<void> | void): void;
     emitOpened(): void;
     backdropClick(): Observable<MouseEvent>;
@@ -176,6 +183,7 @@ declare class PraxisDialogRef<T = any, R = any> {
     notifyBackdropClick(ev: MouseEvent): void;
     notifyKeydown(ev: KeyboardEvent): void;
     close(result?: R): Promise<void>;
+    private performClose;
     updateSize(width?: string | number, height?: string | number): this;
     updatePosition(position?: PraxisDialogPosition): this;
 }
@@ -201,7 +209,7 @@ declare class PraxisDialogContentDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<PraxisDialogContentDirective, "ng-template[praxisDialogContent]", never, {}, {}, never, never, true, never>;
 }
 
-declare class PraxisDialogComponent implements OnInit, OnChanges, OnDestroy {
+declare class PraxisDialogComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
     title?: string;
     actions: DialogAction[];
     actionsLayout: ActionsLayout;
@@ -256,12 +264,20 @@ declare class PraxisDialogComponent implements OnInit, OnChanges, OnDestroy {
     requestClose(): void;
     isDisplayed: boolean;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     onKeydown(ev: KeyboardEvent): void;
     onActionClick(a: DialogAction): void;
     onBackdrop(ev: MouseEvent): void;
     focus(): void;
+    /**
+     * Moves focus into the currently materialized panel. Overlay hosts call this
+     * after switching to the overlay template branch and attaching its content.
+     */
+    focusInitialElement(): void;
     private scheduleInitialFocus;
+    private captureFocusOrigin;
+    private applyInitialFocus;
     private _previouslyFocused?;
     ngOnDestroy(): void;
     get animationClasses(): string[];
@@ -278,6 +294,7 @@ declare const PraxisDialogDirectives: readonly [];
 
 declare class PraxisDialog {
     private readonly overlay;
+    private readonly injector;
     private readonly layerScale;
     private readonly appRef;
     private readonly registry;