@praxisui/dialog 0.0.1

package/fesm2022/praxisui-dialog.mjs

@@ -0,0 +1,981 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, EventEmitter, inject, HostBinding, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, ApplicationRef, Injector, TemplateRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/cdk/portal';
+import { PortalModule, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import * as i3 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlobalConfigService } from '@praxisui/core';
+
+const PRAXIS_DIALOG_DATA = new InjectionToken('PRAXIS_DIALOG_DATA');
+const PRAXIS_DIALOG_I18N = new InjectionToken('PRAXIS_DIALOG_I18N', {
+    providedIn: 'root',
+    factory: () => ({ ok: 'OK', cancel: 'Cancelar', yes: 'Sim', no: 'Não' }),
+});
+const PRAXIS_DIALOG_DEFAULTS = new InjectionToken('PRAXIS_DIALOG_DEFAULTS', {
+    providedIn: 'root',
+    factory: () => ({ maxWidth: '90vw', maxHeight: '80vh' }),
+});
+const PRAXIS_DIALOG_CONTENT_REGISTRY = new InjectionToken('PRAXIS_DIALOG_CONTENT_REGISTRY', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+const PRAXIS_DIALOG_TEMPLATE_REGISTRY = new InjectionToken('PRAXIS_DIALOG_TEMPLATE_REGISTRY', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+const PRAXIS_DIALOG_GLOBAL_PRESETS = new InjectionToken('PRAXIS_DIALOG_GLOBAL_PRESETS', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+
+class PraxisDialogRef {
+    overlayRef;
+    id;
+    _afterOpened = new Subject();
+    _beforeClosed = new Subject();
+    _afterClosed = new Subject();
+    _backdropClick = new Subject();
+    _keydownEvents = new Subject();
+    componentInstance;
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+    }
+    beforeCloseHandler;
+    setBeforeClose(handler) {
+        this.beforeCloseHandler = handler;
+    }
+    emitOpened() {
+        this._afterOpened.next();
+        this._afterOpened.complete();
+    }
+    backdropClick() {
+        return this._backdropClick.asObservable();
+    }
+    keydownEvents() {
+        return this._keydownEvents.asObservable();
+    }
+    afterOpened() {
+        return this._afterOpened.asObservable();
+    }
+    beforeClosed() {
+        return this._beforeClosed.asObservable();
+    }
+    afterClosed() {
+        return this._afterClosed.asObservable();
+    }
+    notifyBackdropClick(ev) {
+        this._backdropClick.next(ev);
+    }
+    notifyKeydown(ev) {
+        this._keydownEvents.next(ev);
+    }
+    async close(result) {
+        this._beforeClosed.next(result);
+        this._beforeClosed.complete();
+        if (this.beforeCloseHandler) {
+            try {
+                await this.beforeCloseHandler(result);
+            }
+            catch { }
+        }
+        this.overlayRef.dispose();
+        this._afterClosed.next(result);
+        this._afterClosed.complete();
+        this._backdropClick.complete();
+        this._keydownEvents.complete();
+    }
+    updateSize(width, height) {
+        this.overlayRef.updateSize({
+            width: coerceCssUnit$1(width),
+            height: coerceCssUnit$1(height),
+        });
+        return this;
+    }
+    updatePosition(position) {
+        this.overlayRef.updatePositionStrategy(this.overlayRef.getConfig().positionStrategy);
+        if (position) {
+            const ps = this.overlayRef.getConfig().positionStrategy;
+            if (ps?.top !== undefined && position.top != null)
+                ps.top(position.top);
+            if (ps?.bottom !== undefined && position.bottom != null)
+                ps.bottom(position.bottom);
+            if (ps?.left !== undefined && position.left != null)
+                ps.left(position.left);
+            if (ps?.right !== undefined && position.right != null)
+                ps.right(position.right);
+            this.overlayRef.updatePosition();
+        }
+        return this;
+    }
+}
+function coerceCssUnit$1(v) {
+    if (v == null)
+        return undefined;
+    return typeof v === 'number' ? `${v}px` : v;
+}
+
+class PraxisDialogTitleDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialogTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: PraxisDialogTitleDirective, isStandalone: true, selector: "ng-template[praxisDialogTitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialogTitleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[praxisDialogTitle]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class PraxisDialogActionsDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialogActionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: PraxisDialogActionsDirective, isStandalone: true, selector: "ng-template[praxisDialogActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialogActionsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[praxisDialogActions]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class PraxisDialogContentDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialogContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: PraxisDialogContentDirective, isStandalone: true, selector: "ng-template[praxisDialogContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialogContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[praxisDialogContent]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class PraxisDialogComponent {
+    title;
+    actions = [];
+    actionsLayout = 'stretched';
+    animation = true;
+    open = true;
+    width;
+    height;
+    minWidth;
+    maxWidth;
+    minHeight;
+    maxHeight;
+    themeColor = 'light';
+    disableClose = false;
+    hasBackdrop = true;
+    overlayMode = false; // true when opened via service/CDK overlay
+    zIndex;
+    panelClass;
+    backdropClass;
+    position;
+    autoFocusedElement;
+    autoFocus;
+    restoreFocus = true;
+    id;
+    ariaRole = 'dialog';
+    ariaLabel;
+    ariaLabelledBy;
+    ariaDescribedBy;
+    styles;
+    titleIcon;
+    action = new EventEmitter();
+    close = new EventEmitter();
+    opened = new EventEmitter();
+    afterClosed = new EventEmitter();
+    contentHost;
+    panelEl;
+    titleTpl;
+    actionsTpl;
+    contentTpl;
+    hostClass = 'pdx-dialog-host';
+    tabindex = '-1';
+    data = inject(PRAXIS_DIALOG_DATA, { optional: true });
+    get titleId() { return (this.id ?? 'praxis-dialog') + '-title'; }
+    isDisplayed = false; // controls DOM visibility for animation in tag mode
+    ngOnInit() {
+        if (this.open) {
+            this.isDisplayed = true;
+            this.applyAnimationVars();
+            this.applyStyleVars();
+            this.beginOpenAnimation().then(() => {
+                if (!this.overlayMode)
+                    this.opened.emit();
+            });
+            this.scheduleInitialFocus();
+        }
+        if (this.ariaRole === 'alertdialog') {
+            const hasLabel = !!(this.title || this.ariaLabel || this.ariaLabelledBy);
+            try {
+                const isDev = typeof globalThis.ngDevMode !== 'undefined' ? !!globalThis.ngDevMode : true;
+                if (isDev && !hasLabel) {
+                    console.warn('[PraxisDialog] alertdialog requires a title or aria label.');
+                }
+            }
+            catch { }
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['open'] && this.open) {
+            this.isDisplayed = true;
+            this.applyAnimationVars();
+            this.applyStyleVars();
+            this.beginOpenAnimation().then(() => {
+                if (!this.overlayMode)
+                    this.opened.emit();
+            });
+            this.scheduleInitialFocus();
+        }
+        if (changes['open'] && !this.open && !this.overlayMode && this.isDisplayed) {
+            // animate close then hide
+            this.beginCloseAnimation().then(() => {
+                this.isDisplayed = false;
+                this.afterClosed.emit();
+                if (this.restoreFocus && this._previouslyFocused && typeof this._previouslyFocused.focus === 'function') {
+                    try {
+                        this._previouslyFocused.focus();
+                    }
+                    catch { }
+                }
+            });
+        }
+        if (changes['animation']) {
+            this.applyAnimationVars();
+        }
+        if (changes['styles']) {
+            this.applyStyleVars();
+        }
+    }
+    onKeydown(ev) {
+        if (ev.key === 'Escape' && !this.disableClose) {
+            ev.stopPropagation();
+            this.close.emit();
+        }
+        if ((ev.key === 'Enter' || ev.key === ' ') && !this.disableClose) {
+            const target = ev.target;
+            const isInteractive = !!target && /^(BUTTON|A|INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
+            if (!isInteractive) {
+                const primary = this.actions.find((a) => a.role === 'primary') || this.actions[0];
+                if (primary) {
+                    ev.preventDefault();
+                    this.onActionClick(primary);
+                }
+            }
+        }
+    }
+    onActionClick(a) {
+        this.action.emit(a);
+        if (a.close) {
+            this.close.emit(a.payload);
+        }
+    }
+    onBackdrop(ev) {
+        if (!this.hasBackdrop)
+            return;
+        if (this.disableClose)
+            return;
+        // Avoid closing when clicking inside the panel area
+        this.close.emit();
+    }
+    focus() {
+        try {
+            this.panelEl?.nativeElement?.focus?.();
+        }
+        catch { }
+    }
+    scheduleInitialFocus() {
+        const panel = this.panelEl?.nativeElement;
+        if (!panel)
+            return;
+        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?.();
+                    return;
+                }
+                // focus first focusable
+                const focusable = panel.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                (focusable || panel).focus?.();
+            }
+            catch { }
+        });
+    }
+    _previouslyFocused;
+    ngOnDestroy() {
+        if (this.restoreFocus && this._previouslyFocused && typeof this._previouslyFocused.focus === 'function') {
+            try {
+                this._previouslyFocused.focus();
+            }
+            catch { }
+        }
+    }
+    get animationClasses() {
+        const anim = this.animation;
+        if (!anim)
+            return [];
+        const conf = typeof anim === 'boolean' ? { type: 'translate', duration: 300 } : anim;
+        const type = conf.type || 'translate';
+        const dir = conf.direction || 'up';
+        const map = {
+            translate: `pdx-anim-translate-${dir}`,
+            slide: `pdx-anim-translate-${dir}`,
+            fade: 'pdx-anim-fade',
+            expand: 'pdx-anim-zoom',
+            zoom: 'pdx-anim-zoom',
+        };
+        return [map[type] || ''];
+    }
+    get panelNgClass() {
+        const anim = this.animationClasses || [];
+        const extra = this.panelClass;
+        if (extra && typeof extra === 'object' && !Array.isArray(extra)) {
+            const obj = { ...extra };
+            for (const c of anim)
+                obj[c] = true;
+            return obj;
+        }
+        if (typeof extra === 'string')
+            return [...anim, extra];
+        if (Array.isArray(extra))
+            return [...anim, ...extra];
+        return anim;
+    }
+    applyAnimationVars() {
+        if (!this.panelEl)
+            return;
+        const anim = this.animation;
+        const conf = anim === true || anim == null ? { type: 'translate', duration: 300 } : anim;
+        const dur = (conf.duration ?? 300);
+        try {
+            this.panelEl.nativeElement.style.setProperty('--pdx-dialog-anim-duration', `${dur}ms`);
+            this.panelEl.nativeElement.style.setProperty('--pdx-dialog-anim-ease', conf.easing || 'cubic-bezier(0.2, 0, 0, 1)');
+        }
+        catch { }
+    }
+    applyStyleVars() {
+        if (!this.panelEl)
+            return;
+        const s = this.styles || {};
+        const set = (name, value) => {
+            if (value == null)
+                return;
+            try {
+                this.panelEl.nativeElement.style.setProperty(name, String(value));
+            }
+            catch { }
+        };
+        // Base
+        set('--pdx-dialog-actions-padding', s.actionsPadding);
+        set('--pdx-dialog-elevation-shadow', s.containerElevationShadow);
+        set('--pdx-dialog-max-width', s.containerMaxWidth);
+        set('--pdx-dialog-min-width', s.containerMinWidth);
+        set('--pdx-dialog-shape', s.containerShape);
+        set('--pdx-dialog-small-max-width', s.containerSmallMaxWidth);
+        set('--pdx-dialog-content-padding', s.contentPadding);
+        set('--pdx-dialog-headline-padding', s.headlinePadding);
+        set('--pdx-dialog-with-actions-content-padding', s.withActionsContentPadding);
+        // Color
+        set('--pdx-dialog-container-color', s.containerColor);
+        set('--pdx-dialog-subhead-color', s.subheadColor);
+        set('--pdx-dialog-supporting-text-color', s.supportingTextColor);
+        // Typography - title
+        set('--pdx-dialog-subhead-font', s.subheadFont);
+        set('--pdx-dialog-subhead-line-height', s.subheadLineHeight);
+        set('--pdx-dialog-subhead-size', s.subheadSize);
+        set('--pdx-dialog-subhead-tracking', s.subheadTracking);
+        set('--pdx-dialog-subhead-weight', s.subheadWeight);
+        // Typography - content
+        set('--pdx-dialog-supporting-text-font', s.supportingTextFont);
+        set('--pdx-dialog-supporting-text-line-height', s.supportingTextLineHeight);
+        set('--pdx-dialog-supporting-text-size', s.supportingTextSize);
+        set('--pdx-dialog-supporting-text-tracking', s.supportingTextTracking);
+        set('--pdx-dialog-supporting-text-weight', s.supportingTextWeight);
+        // Alignment alias
+        if (s.actionsAlignment)
+            this.actionsLayout = s.actionsAlignment;
+    }
+    beginOpenAnimation() {
+        if (!this.animation)
+            return Promise.resolve();
+        const panel = this.panelEl?.nativeElement;
+        if (!panel)
+            return Promise.resolve();
+        panel.classList.add('pdx-state-opening');
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                panel.classList.remove('pdx-state-opening');
+                panel.classList.add('pdx-state-open');
+                // resolve after transition duration
+                const dur = parseFloat(getComputedStyle(panel).getPropertyValue('--pdx-dialog-anim-duration')) || 300;
+                setTimeout(() => resolve(), dur);
+            });
+        });
+    }
+    beginCloseAnimation() {
+        if (!this.animation)
+            return Promise.resolve();
+        const panel = this.panelEl?.nativeElement;
+        if (!panel)
+            return Promise.resolve();
+        panel.classList.add('pdx-state-closing');
+        return new Promise((resolve) => {
+            let done = false;
+            const finish = () => { if (done)
+                return; done = true; panel.removeEventListener('transitionend', onEnd); resolve(); };
+            const onEnd = (ev) => {
+                if (ev.propertyName === 'opacity' || ev.propertyName === 'transform')
+                    finish();
+            };
+            panel.addEventListener('transitionend', onEnd);
+            const durVar = getComputedStyle(panel).getPropertyValue('--pdx-dialog-anim-duration');
+            const durMs = parseFloat(durVar) || 300;
+            setTimeout(finish, durMs + 20);
+        });
+    }
+    focusPrimaryAction() {
+        try {
+            const panel = this.panelEl?.nativeElement;
+            if (!panel)
+                return false;
+            const buttons = Array.from(panel.querySelectorAll('.pdx-dialog__actions .pdx-dialog__action-btn'));
+            if (buttons.length === 0)
+                return false;
+            // Prefer the first button corresponding to a primary role
+            const primaryIndex = this.actions.findIndex((a) => a?.role === 'primary');
+            if (primaryIndex >= 0 && buttons[primaryIndex]) {
+                buttons[primaryIndex].focus();
+                return true;
+            }
+            // Fallback to last button
+            buttons[buttons.length - 1].focus();
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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", 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  <div class=\"pdx-dialog__title\" @if (titleTpl?.templateRef || title || titleIcon)>\n    @if (titleTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"titleTpl!.templateRef\"></ng-container>\n    } @else {\n      <div class=\"pdx-dialog__title-row\">\n        <span *ngIf=\"titleIcon\" class=\"material-icons pdx-dialog__title-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\n        <h2 class=\"pdx-dialog__title-text\" [attr.id]=\"_titleId\">{{ title }}</h2>\n      </div>\n    }\n  </div>\n  </ng-template>\n\n<ng-template #panelActions>\n  <div class=\"pdx-dialog__actions\" [class.is-stretched]=\"actionsLayout==='stretched'\">\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          [ngClass]=\"a.cssClass\"\n          (click)=\"onActionClick(a)\"\n          [attr.cdkFocusInitial]=\"a.role==='primary' && ariaRole==='alertdialog' ? '' : null\"\n        >\n          <span *ngIf=\"a.icon\" class=\"material-icons\">{{ a.icon }}</span>\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-{{ actionsLayout }}\"\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 [ngTemplateOutlet]=\"contentTpl!.templateRef\"></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 class=\"pdx-dialog-overlay\" [class.has-backdrop]=\"hasBackdrop\" [hidden]=\"!isDisplayed\" (click)=\"onBackdrop($event)\" [ngClass]=\"backdropClass\" [style.z-index]=\"zIndex\">\n    <div class=\"pdx-dialog-shell\" (click)=\"$event.stopPropagation()\">\n      <div\n        #panel\n        class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\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]=\"(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 [ngTemplateOutlet]=\"contentTpl!.templateRef\"></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: [".pdx-dialog-host{--pdx-dialog-bg: var(--pdx-dialog-bg, #fff);--pdx-dialog-surface: var(--pdx-dialog-surface, #fff);--pdx-dialog-border: var(--pdx-dialog-border, rgba(0, 0, 0, .12));--pdx-dialog-title-fg: var(--pdx-dialog-title-fg, #111);--pdx-dialog-elevation: var(--pdx-dialog-elevation, 24)}.pdx-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;background:transparent}.pdx-dialog-overlay.has-backdrop{background:#00000059}.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:#111;border:1px solid var(--pdx-dialog-border);border-radius:var(--pdx-dialog-shape, 8px);box-shadow:var(--pdx-dialog-elevation-shadow, 0 2px 8px rgba(0, 0, 0, .2));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 16px);border-bottom:1px solid var(--pdx-dialog-border);color:var(--pdx-dialog-subhead-color, var(--pdx-dialog-title-fg))}.pdx-dialog__title-row{display:flex;align-items:center;gap:8px}.pdx-dialog__title-icon{font-size:20px;line-height:1;opacity:.87}.pdx-dialog__title-text{margin:0;font-family:var(--pdx-dialog-subhead-font, inherit);line-height:var(--pdx-dialog-subhead-line-height, 1.4);font-size:var(--pdx-dialog-subhead-size, 16px);letter-spacing:var(--pdx-dialog-subhead-tracking, normal);font-weight:var(--pdx-dialog-subhead-weight, 600)}.pdx-dialog__content{padding:var(--pdx-dialog-content-padding, 16px);overflow:auto;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 16px);border-top:1px solid var(--pdx-dialog-border);justify-content:flex-end}.pdx-dialog__actions.is-stretched{justify-content:stretch}.pdx-dialog__action-btn{appearance:none;border:1px solid var(--pdx-dialog-border);background:#f7f7f7;border-radius:4px;padding:6px 12px;cursor:pointer}.pdx-dialog--primary .pdx-dialog__title{background:#1976d2;color:#fff;border-bottom-color:#0003}.pdx-dialog--dark{background:#222;color:#f2f2f2}.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-dialog', standalone: true, imports: [CommonModule, PortalModule, A11yModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let _titleId = (id ?? 'praxis-dialog') + '-title';\n\n<ng-template #panelHeader>\n  <div class=\"pdx-dialog__title\" @if (titleTpl?.templateRef || title || titleIcon)>\n    @if (titleTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"titleTpl!.templateRef\"></ng-container>\n    } @else {\n      <div class=\"pdx-dialog__title-row\">\n        <span *ngIf=\"titleIcon\" class=\"material-icons pdx-dialog__title-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\n        <h2 class=\"pdx-dialog__title-text\" [attr.id]=\"_titleId\">{{ title }}</h2>\n      </div>\n    }\n  </div>\n  </ng-template>\n\n<ng-template #panelActions>\n  <div class=\"pdx-dialog__actions\" [class.is-stretched]=\"actionsLayout==='stretched'\">\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          [ngClass]=\"a.cssClass\"\n          (click)=\"onActionClick(a)\"\n          [attr.cdkFocusInitial]=\"a.role==='primary' && ariaRole==='alertdialog' ? '' : null\"\n        >\n          <span *ngIf=\"a.icon\" class=\"material-icons\">{{ a.icon }}</span>\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-{{ actionsLayout }}\"\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 [ngTemplateOutlet]=\"contentTpl!.templateRef\"></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 class=\"pdx-dialog-overlay\" [class.has-backdrop]=\"hasBackdrop\" [hidden]=\"!isDisplayed\" (click)=\"onBackdrop($event)\" [ngClass]=\"backdropClass\" [style.z-index]=\"zIndex\">\n    <div class=\"pdx-dialog-shell\" (click)=\"$event.stopPropagation()\">\n      <div\n        #panel\n        class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\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]=\"(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 [ngTemplateOutlet]=\"contentTpl!.templateRef\"></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: [".pdx-dialog-host{--pdx-dialog-bg: var(--pdx-dialog-bg, #fff);--pdx-dialog-surface: var(--pdx-dialog-surface, #fff);--pdx-dialog-border: var(--pdx-dialog-border, rgba(0, 0, 0, .12));--pdx-dialog-title-fg: var(--pdx-dialog-title-fg, #111);--pdx-dialog-elevation: var(--pdx-dialog-elevation, 24)}.pdx-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;background:transparent}.pdx-dialog-overlay.has-backdrop{background:#00000059}.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:#111;border:1px solid var(--pdx-dialog-border);border-radius:var(--pdx-dialog-shape, 8px);box-shadow:var(--pdx-dialog-elevation-shadow, 0 2px 8px rgba(0, 0, 0, .2));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 16px);border-bottom:1px solid var(--pdx-dialog-border);color:var(--pdx-dialog-subhead-color, var(--pdx-dialog-title-fg))}.pdx-dialog__title-row{display:flex;align-items:center;gap:8px}.pdx-dialog__title-icon{font-size:20px;line-height:1;opacity:.87}.pdx-dialog__title-text{margin:0;font-family:var(--pdx-dialog-subhead-font, inherit);line-height:var(--pdx-dialog-subhead-line-height, 1.4);font-size:var(--pdx-dialog-subhead-size, 16px);letter-spacing:var(--pdx-dialog-subhead-tracking, normal);font-weight:var(--pdx-dialog-subhead-weight, 600)}.pdx-dialog__content{padding:var(--pdx-dialog-content-padding, 16px);overflow:auto;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 16px);border-top:1px solid var(--pdx-dialog-border);justify-content:flex-end}.pdx-dialog__actions.is-stretched{justify-content:stretch}.pdx-dialog__action-btn{appearance:none;border:1px solid var(--pdx-dialog-border);background:#f7f7f7;border-radius:4px;padding:6px 12px;cursor:pointer}.pdx-dialog--primary .pdx-dialog__title{background:#1976d2;color:#fff;border-bottom-color:#0003}.pdx-dialog--dark{background:#222;color:#f2f2f2}.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"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionsLayout: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], disableClose: [{
+                type: Input
+            }], hasBackdrop: [{
+                type: Input
+            }], overlayMode: [{
+                type: Input
+            }], zIndex: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], backdropClass: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], autoFocusedElement: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], restoreFocus: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], titleIcon: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], afterClosed: [{
+                type: Output
+            }], contentHost: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: false }]
+            }], panelEl: [{
+                type: ViewChild,
+                args: ['panel', { static: true }]
+            }], titleTpl: [{
+                type: ContentChild,
+                args: [PraxisDialogTitleDirective, { read: PraxisDialogTitleDirective }]
+            }], actionsTpl: [{
+                type: ContentChild,
+                args: [PraxisDialogActionsDirective, { read: PraxisDialogActionsDirective }]
+            }], contentTpl: [{
+                type: ContentChild,
+                args: [PraxisDialogContentDirective, { read: PraxisDialogContentDirective }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });
+const PraxisDialogDirectives = [];
+
+class DialogOverlayService {
+    overlay = inject(Overlay);
+    createOverlay(cfg, injector) {
+        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);
+        return compRef;
+    }
+    buildOverlayConfig(cfg) {
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .centerHorizontally()
+            .centerVertically();
+        if (cfg?.position) {
+            if (cfg.position.top != null)
+                positionStrategy.top(String(cfg.position.top));
+            if (cfg.position.bottom != null)
+                positionStrategy.bottom(String(cfg.position.bottom));
+            if (cfg.position.left != null)
+                positionStrategy.left(String(cfg.position.left));
+            if (cfg.position.right != null)
+                positionStrategy.right(String(cfg.position.right));
+        }
+        const scrollStrategy = (() => {
+            switch (cfg?.scrollStrategy) {
+                case 'noop':
+                    return this.overlay.scrollStrategies.noop();
+                case 'reposition':
+                    return this.overlay.scrollStrategies.reposition();
+                case 'block':
+                default:
+                    return this.overlay.scrollStrategies.block();
+            }
+        })();
+        const hasBackdrop = cfg?.hasBackdrop ?? true;
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop,
+            disposeOnNavigation: cfg?.closeOnNavigation ?? true,
+            panelClass: cfg?.panelClass,
+            backdropClass: cfg?.backdropClass,
+            positionStrategy,
+            scrollStrategy,
+            width: coerceCssUnit(cfg?.width),
+            height: coerceCssUnit(cfg?.height),
+        });
+        if (cfg?.zIndex != null) {
+            overlayConfig.zIndex = cfg.zIndex;
+        }
+        return overlayConfig;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogOverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DialogOverlayService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function coerceCssUnit(v) {
+    if (v == null)
+        return undefined;
+    return typeof v === 'number' ? `${v}px` : v;
+}
+const DialogOverlayImports = [OverlayModule, PortalModule];
+
+class PraxisDialog {
+    overlay = inject(DialogOverlayService);
+    appRef = inject(ApplicationRef);
+    registry = inject(PRAXIS_DIALOG_CONTENT_REGISTRY);
+    i18n = inject(PRAXIS_DIALOG_I18N);
+    templateRegistry = inject(PRAXIS_DIALOG_TEMPLATE_REGISTRY);
+    sanitizer = inject(DomSanitizer);
+    globalPresets = inject(PRAXIS_DIALOG_GLOBAL_PRESETS);
+    defaults = inject(PRAXIS_DIALOG_DEFAULTS);
+    afterAllClosed = new Subject();
+    afterOpened = new Subject();
+    _openDialogs = [];
+    get openDialogs() { return this._openDialogs.slice(); }
+    _seq = 0;
+    open(content, config) {
+        const injector = Injector.create({
+            providers: [{ provide: PRAXIS_DIALOG_DATA, useValue: config?.data }],
+        });
+        const overlayRef = this.overlay.createOverlay(config ?? {}, injector);
+        const ref = new PraxisDialogRef(overlayRef);
+        // Auto-id fallback if not provided
+        let assignedId = config?.id ?? `praxis-dialog-${++this._seq}`;
+        while (this.getDialogById(assignedId)) {
+            assignedId = `praxis-dialog-${++this._seq}`;
+        }
+        ref.id = assignedId;
+        const compRef = this.overlay.attachContainer(overlayRef, injector);
+        const container = compRef.instance;
+        // Set inputs before detectChanges so the correct branch/materialization occurs
+        container.overlayMode = true;
+        container.title = config?.title;
+        container.titleIcon = config?.icon ?? config?.titleIcon;
+        container.actions = config?.actions ?? [];
+        container.actionsLayout = config?.actionsLayout ?? 'stretched';
+        container.animation = config?.animation ?? { type: 'translate', duration: 300 };
+        container.width = config?.width;
+        container.height = config?.height;
+        container.minWidth = config?.minWidth;
+        container.maxWidth = config?.maxWidth ?? this.defaults.maxWidth;
+        container.minHeight = config?.minHeight;
+        container.maxHeight = config?.maxHeight ?? this.defaults.maxHeight;
+        container.themeColor = config?.themeColor ?? 'light';
+        container.styles = config?.styles;
+        container.disableClose = !!config?.disableClose;
+        container.hasBackdrop = config?.hasBackdrop ?? true;
+        container.panelClass = config?.panelClass;
+        container.backdropClass = config?.backdropClass;
+        container.position = config?.position;
+        container.autoFocusedElement = config?.autoFocusedElement;
+        container.autoFocus = config?.autoFocus ?? container.autoFocus;
+        container.restoreFocus = config?.restoreFocus ?? true;
+        container.id = assignedId;
+        container.ariaRole = config?.ariaRole ?? 'dialog';
+        container.ariaLabel = config?.ariaLabel;
+        container.ariaLabelledBy = config?.ariaLabelledBy;
+        container.ariaDescribedBy = config?.ariaDescribedBy;
+        try {
+            compRef.changeDetectorRef.detectChanges();
+        }
+        catch { }
+        const subAction = container.action.subscribe((a) => {
+            if (a.close && !config?.disableClose) {
+                ref.close(a.payload);
+            }
+        });
+        const subClose = container.close.subscribe((result) => {
+            if (!config?.disableClose) {
+                ref.close(result);
+            }
+        });
+        const backdropSub = overlayRef.backdropClick().subscribe((ev) => {
+            ref.notifyBackdropClick(ev);
+            if (!config?.disableClose && (config?.closeOnBackdropClick ?? true)) {
+                ref.close();
+            }
+        });
+        const keydownSub = overlayRef.keydownEvents().subscribe((ev) => {
+            ref.notifyKeydown(ev);
+        });
+        // Attach portal content now that the outlet exists
+        const doAttach = () => {
+            if (content instanceof TemplateRef) {
+                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 innerRef = container.contentHost.attachComponentPortal(portal);
+                ref.componentInstance = innerRef.instance;
+            }
+        };
+        if (container.contentHost) {
+            doAttach();
+        }
+        else {
+            try {
+                compRef.changeDetectorRef.detectChanges();
+            }
+            catch { }
+            queueMicrotask(() => {
+                if (container.contentHost)
+                    doAttach();
+            });
+        }
+        // Animate open then emit afterOpened
+        container.beginOpenAnimation().then(() => {
+            ref.emitOpened();
+            this.afterOpened.next(ref);
+        });
+        overlayRef.detachments().subscribe(() => {
+            subAction.unsubscribe();
+            subClose.unsubscribe();
+            backdropSub.unsubscribe();
+            keydownSub.unsubscribe();
+        });
+        // Close animation hook
+        ref.setBeforeClose(async () => {
+            await container.beginCloseAnimation();
+        });
+        // Track open dialogs and notify when all are closed
+        this._openDialogs.push(ref);
+        ref.afterClosed().subscribe(() => {
+            this._openDialogs = this._openDialogs.filter((r) => r !== ref);
+            if (this._openDialogs.length === 0)
+                this.afterAllClosed.next();
+        });
+        return ref;
+    }
+    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 },
+        ];
+        const Comp = SimpleDialogContentComponent;
+        return this.open(Comp, {
+            ...merged,
+            actions,
+            data: { message: merged.message, mode: 'confirm' },
+            ariaRole: merged.ariaRole ?? 'alertdialog',
+        });
+    }
+    alert(cfg) {
+        const merged = this.mergePresets('alert', undefined, cfg);
+        const actions = [
+            { 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' });
+    }
+    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' },
+        ];
+        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' });
+        ref.afterOpened().subscribe(() => {
+            const inst = ref.componentInstance;
+            inst.submit = () => ref.close(inst.value ?? '');
+        });
+        return ref;
+    }
+    openByRegistry(id, config) {
+        const comp = this.registry[id];
+        if (!comp) {
+            throw new Error(`Dialog registry: component '${id}' not found`);
+        }
+        return this.open(comp, config);
+    }
+    openTemplateById(templateId, config) {
+        const tpl = this.templateRegistry[templateId];
+        if (!tpl)
+            throw new Error(`Dialog template '${templateId}' not found`);
+        return this.open(tpl, config);
+    }
+    openSafeHtml(html, config) {
+        const safe = this.sanitizer.bypassSecurityTrustHtml(html);
+        const Comp = SimpleHtmlDialogContentComponent;
+        return this.open(Comp, { ...config, data: { safeHtml: safe } });
+    }
+    mergePresets(type, variant, cfg) {
+        const base = this.globalPresets?.[type] ?? {};
+        const variantCfg = variant ? (this.globalPresets?.variants?.[variant] ?? {}) : {};
+        return mergeDialogConfig(mergeDialogConfig(base, variantCfg), cfg);
+    }
+    closeAll() {
+        const list = this._openDialogs.slice();
+        list.forEach((r) => r.close());
+    }
+    getDialogById(id) {
+        return this._openDialogs.find((r) => r.id === id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialog, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisDialog, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class SimpleDialogContentComponent {
+    message;
+    mode = 'alert';
+    placeholder;
+    value;
+    submit;
+    dialogData = inject(PRAXIS_DIALOG_DATA, { optional: true });
+    constructor() {
+        const data = this.dialogData;
+        try {
+            this.message = data?.message;
+            this.mode = data?.mode || 'alert';
+            this.placeholder = data?.placeholder;
+            this.value = data?.defaultValue ?? null;
+        }
+        catch { }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SimpleDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: SimpleDialogContentComponent, isStandalone: true, selector: "praxis-simple-dialog-content", ngImport: i0, template: `
+    <div class="pdx-simple-dialog">
+      <p *ngIf="message" class="pdx-simple-dialog__message">{{ message }}</p>
+      <input
+        *ngIf="mode === 'prompt'"
+        class="pdx-simple-dialog__input"
+        [attr.placeholder]="placeholder || ''"
+        [(ngModel)]="value"
+      />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SimpleDialogContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'praxis-simple-dialog-content',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule],
+                    template: `
+    <div class="pdx-simple-dialog">
+      <p *ngIf="message" class="pdx-simple-dialog__message">{{ message }}</p>
+      <input
+        *ngIf="mode === 'prompt'"
+        class="pdx-simple-dialog__input"
+        [attr.placeholder]="placeholder || ''"
+        [(ngModel)]="value"
+      />
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+class SimpleHtmlDialogContentComponent {
+    safeHtml;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SimpleHtmlDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: SimpleHtmlDialogContentComponent, isStandalone: true, selector: "praxis-simple-html-dialog-content", ngImport: i0, template: `<div class="pdx-simple-dialog" [innerHTML]="safeHtml"></div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SimpleHtmlDialogContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'praxis-simple-html-dialog-content',
+                    standalone: true,
+                    imports: [],
+                    template: `<div class="pdx-simple-dialog" [innerHTML]="safeHtml"></div>`,
+                }]
+        }] });
+function mergeDialogConfig(a, b) {
+    const out = { ...a };
+    for (const [k, v] of Object.entries(b || {})) {
+        if (v == null)
+            continue;
+        if (k === 'styles' && typeof v === 'object') {
+            out.styles = { ...(out.styles || {}), ...v };
+        }
+        else if (k === 'actions' && Array.isArray(v)) {
+            out.actions = v.slice();
+        }
+        else if (typeof v === 'object' && !Array.isArray(v)) {
+            out[k] = { ...(out[k] || {}), ...v };
+        }
+        else {
+            out[k] = v;
+        }
+    }
+    return out;
+}
+
+/**
+ * Provides PRAXIS_DIALOG_GLOBAL_PRESETS by transforming GlobalConfig.dialog
+ * into the structure expected by @praxisui/dialog.
+ */
+function provideDialogGlobalPresetsFromGlobalConfig() {
+    return {
+        provide: PRAXIS_DIALOG_GLOBAL_PRESETS,
+        deps: [GlobalConfigService],
+        useFactory: (gc) => {
+            const d = gc.get('dialog') || undefined;
+            const coerce = (entry) => {
+                if (!entry || typeof entry !== 'object')
+                    return entry;
+                const out = { ...entry };
+                // Best-effort JSON parse for text inputs saved via editor
+                const parseIfString = (v) => {
+                    if (typeof v === 'string') {
+                        try {
+                            return JSON.parse(v);
+                        }
+                        catch {
+                            return v;
+                        }
+                    }
+                    return v;
+                };
+                if (typeof out.actions === 'string')
+                    out.actions = parseIfString(out.actions);
+                if (typeof out.styles === 'string')
+                    out.styles = parseIfString(out.styles);
+                if (typeof out.animation === 'string')
+                    out.animation = parseIfString(out.animation);
+                return out;
+            };
+            const variants = {};
+            for (const key of Object.keys(d?.variants || {})) {
+                variants[key] = coerce(d.variants[key]);
+            }
+            return {
+                confirm: coerce(d?.defaults?.confirm),
+                alert: coerce(d?.defaults?.alert),
+                prompt: coerce(d?.defaults?.prompt),
+                variants,
+            };
+        },
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PRAXIS_DIALOG_CONTENT_REGISTRY, PRAXIS_DIALOG_DATA, PRAXIS_DIALOG_DEFAULTS, PRAXIS_DIALOG_GLOBAL_PRESETS, PRAXIS_DIALOG_I18N, PRAXIS_DIALOG_TEMPLATE_REGISTRY, PraxisDialog, PraxisDialogActionsDirective, PraxisDialogComponent, PraxisDialogContentDirective, PraxisDialogDirectives, PraxisDialogRef, PraxisDialogTitleDirective, provideDialogGlobalPresetsFromGlobalConfig };
+//# sourceMappingURL=praxisui-dialog.mjs.map