ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-dialog.mjs

@@ -1,13 +1,11 @@
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, HostBinding, HostListener, InjectionToken, inject, DestroyRef, Injector, Injectable, NgModule, Optional, Input } from '@angular/core';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i2 from '@angular/cdk/overlay';
-import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { Subject, filter, take } from 'rxjs';
-import { hasModifierKey } from '@angular/cdk/keycodes';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { generateRandomId } from 'ngwr/cdk/utils';
+import { InjectionToken, inject, EnvironmentInjector, PLATFORM_ID, Injector, Service, ElementRef, Directive, input, computed } from '@angular/core';
+import { WR_OVERLAY } from 'ngwr/overlay';
+import { Subject } from 'rxjs';
 
 /**
  * @license
@@ -15,165 +13,65 @@ import { generateRandomId } from 'ngwr/cdk/utils';
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-const WR_ANIMATION_ZOOM_CLASS_NAME_MAP = {
-    enter: 'wr-animation-zoom-enter',
-    enterActive: 'wr-animation-zoom-enter--active',
-    leave: 'wr-animation-zoom-leave',
-    leaveActive: 'wr-animation-zoom-leave--active',
-};
-const WR_ANIMATION_FADE_CLASS_NAME_MAP = {
-    enter: 'wr-animation-fade-enter',
-    enterActive: 'wr-animation-fade-enter--active',
-    leave: 'wr-animation-fade-leave',
-    leaveActive: 'wr-animation-fade-leave--active',
-};
-const wrDialogAnimations = {
-    dialogComponent: trigger('dialogComponent', [
-        state('void, exit', style({})),
-        state('enter', style({})),
-        transition('* => enter', animate('.24s', style({}))),
-        transition('* => void, * => exit', animate('.2s', style({}))),
-    ]),
-};
-
 /**
- * @license
+ * Handle returned by `WrDialog.open()`.
  *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ * Wraps the underlying `OverlayRef` and tracks the close result.
+ *
+ * @example
+ * ```ts
+ * const ref = dialog.open<ConfirmComponent, boolean>(ConfirmComponent);
+ * const result = await ref.awaitClose(); // boolean | undefined
+ * ```
  */
-class WrDialogOptions {
-}
-
-class WrDialogBaseDirective extends BasePortalOutlet {
-    constructor(cdr, options, overlayRef) {
-        super();
-        this.cdr = cdr;
-        this.options = options;
-        this.overlayRef = overlayRef;
-        this.containerClick = new EventEmitter();
-        this.animationStateChanged = new EventEmitter();
-        this.state = 'enter';
-    }
-    onContainerClick(e) {
-        if (e.target === e.currentTarget || e.target === this.dialogElementRef.nativeElement) {
-            this.containerClick.emit();
-        }
-    }
-    attachComponentPortal(portal) {
-        return this.portalOutlet.attachComponentPortal(portal);
-    }
-    attachTemplatePortal(portal) {
-        return this.portalOutlet.attachTemplatePortal(portal);
-    }
-    setEnterAnimationClass() {
-        const dialogElement = this.dialogElementRef.nativeElement;
-        const backdropElement = this.overlayRef.backdropElement;
-        dialogElement.classList.add(WR_ANIMATION_ZOOM_CLASS_NAME_MAP.enter);
-        dialogElement.classList.add(WR_ANIMATION_ZOOM_CLASS_NAME_MAP.enterActive);
-        if (backdropElement) {
-            backdropElement.classList.add(WR_ANIMATION_FADE_CLASS_NAME_MAP.enter);
-            backdropElement.classList.add(WR_ANIMATION_FADE_CLASS_NAME_MAP.enterActive);
-        }
-    }
-    setExitAnimationClass() {
-        const dialogElement = this.dialogElementRef.nativeElement;
-        dialogElement.classList.add(WR_ANIMATION_ZOOM_CLASS_NAME_MAP.leave);
-        dialogElement.classList.add(WR_ANIMATION_ZOOM_CLASS_NAME_MAP.leaveActive);
-        this.setMaskExitAnimationClass();
-    }
-    setMaskExitAnimationClass() {
-        const backdropElement = this.overlayRef.backdropElement;
-        if (backdropElement) {
-            backdropElement.classList.add(WR_ANIMATION_FADE_CLASS_NAME_MAP.leave);
-            backdropElement.classList.add(WR_ANIMATION_FADE_CLASS_NAME_MAP.leaveActive);
-        }
-    }
-    cleanAnimationClass() {
-        const backdropElement = this.overlayRef.backdropElement;
-        const dialogElement = this.dialogElementRef.nativeElement;
-        if (backdropElement) {
-            backdropElement.classList.remove(WR_ANIMATION_FADE_CLASS_NAME_MAP.enter);
-            backdropElement.classList.remove(WR_ANIMATION_FADE_CLASS_NAME_MAP.enterActive);
+class WrDialogRef {
+    _overlayRef;
+    /** Emits the close result once and completes. */
+    closed = new Subject();
+    /** @internal */
+    componentRef = null;
+    /** @internal */
+    focusTrap = null;
+    /** @internal */
+    previouslyFocused = null;
+    constructor(_overlayRef) {
+        this._overlayRef = _overlayRef;
+    }
+    /** The instantiated dialog component. */
+    get componentInstance() {
+        if (!this.componentRef) {
+            throw new Error('WrDialogRef: component not yet attached');
         }
-        dialogElement.classList.remove(WR_ANIMATION_ZOOM_CLASS_NAME_MAP.enter);
-        dialogElement.classList.remove(WR_ANIMATION_ZOOM_CLASS_NAME_MAP.enterActive);
-        dialogElement.classList.remove(WR_ANIMATION_ZOOM_CLASS_NAME_MAP.leave);
-        dialogElement.classList.remove(WR_ANIMATION_ZOOM_CLASS_NAME_MAP.leaveActive);
+        return this.componentRef.instance;
     }
-    onAnimationDone(event) {
-        this.cleanAnimationClass();
-        this.animationStateChanged.emit(event);
-    }
-    onAnimationStart(event) {
-        if (event.toState === 'enter') {
-            this.setEnterAnimationClass();
-        }
-        else if (event.toState === 'exit') {
-            this.setExitAnimationClass();
+    /** Close the dialog, optionally returning a result. */
+    close(result) {
+        this.closed.next(result);
+        this.closed.complete();
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+        const restore = this.previouslyFocused;
+        this.previouslyFocused = null;
+        this._overlayRef.dispose();
+        // Restore focus after disposal so the trigger is reachable again.
+        if (restore && typeof restore.focus === 'function') {
+            restore.focus();
         }
-        this.animationStateChanged.emit(event);
-    }
-    startExitAnimation() {
-        this.state = 'exit';
-        this.cdr.markForCheck();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogBaseDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: WrDialogOptions }, { token: i2.OverlayRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: WrDialogBaseDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogBaseDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: WrDialogOptions }, { type: i2.OverlayRef }] });
-
-class WrDialogComponent extends WrDialogBaseDirective {
-    onAnimationStart(event) {
-        super.onAnimationStart(event);
-    }
-    onAnimationDone(event) {
-        super.onAnimationDone(event);
-    }
-    onContainerClick(e) {
-        super.onContainerClick(e);
     }
-    /** Set element classes */
-    get elClasses() {
-        return {
-            'wr-dialog': true,
-        };
+    /** Resolves with the close result when the dialog is dismissed. */
+    awaitClose() {
+        return new Promise(resolve => {
+            this.closed.subscribe({
+                next: value => resolve(value),
+                complete: () => resolve(undefined),
+            });
+        });
     }
-    constructor(cdr, options, overlayRef) {
-        super(cdr, options, overlayRef);
-        this.options = options;
-        this.state = 'enter';
+    /** Underlying overlay ref — escape hatch for advanced cases. */
+    get overlayRef() {
+        return this._overlayRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WrDialogOptions }, { token: i2.OverlayRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: WrDialogComponent, isStandalone: true, selector: "wr-dialog", host: { listeners: { "@dialogComponent.start": "onAnimationStart($event)", "@dialogComponent.done": "onAnimationDone($event)", "click": "onContainerClick($event)" }, properties: { "@dialogComponent": "this.state", "class": "this.elClasses" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "dialogElementRef", first: true, predicate: ["dialogElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wr-dialog__wrapper\" #dialogElement>\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [wrDialogAnimations.dialogComponent], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wr-dialog', animations: [wrDialogAnimations.dialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkPortalOutlet], template: "<div class=\"wr-dialog__wrapper\" #dialogElement>\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: WrDialogOptions }, { type: i2.OverlayRef }], propDecorators: { portalOutlet: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: true }]
-            }], dialogElementRef: [{
-                type: ViewChild,
-                args: ['dialogElement', { static: true }]
-            }], state: [{
-                type: HostBinding,
-                args: ['@dialogComponent']
-            }], onAnimationStart: [{
-                type: HostListener,
-                args: ['@dialogComponent.start', ['$event']]
-            }], onAnimationDone: [{
-                type: HostListener,
-                args: ['@dialogComponent.done', ['$event']]
-            }], onContainerClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], elClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
 
 /**
  * @license
@@ -181,6 +79,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+/**
+ * Token that exposes the `data` payload passed to `WrDialog.open()`.
+ *
+ * @example
+ * ```ts
+ * @Component({...})
+ * export class ConfirmComponent {
+ *   readonly data = inject<ConfirmData>(WR_DIALOG_DATA);
+ * }
+ * ```
+ */
 const WR_DIALOG_DATA = new InjectionToken('WR_DIALOG_DATA');
 
 /**
@@ -189,61 +98,13 @@ const WR_DIALOG_DATA = new InjectionToken('WR_DIALOG_DATA');
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrDialogRef {
-    constructor(overlayRef, options, baseInstance) {
-        this.overlayRef = overlayRef;
-        this.options = options;
-        this.baseInstance = baseInstance;
-        this.componentInstance = null;
-        this.afterOpened = new Subject();
-        this.afterClosed = new Subject();
-        this.destroyRef$ = inject(DestroyRef);
-        this.id = options.id || `wr__modal__${generateRandomId()}`;
-        baseInstance.animationStateChanged
-            .pipe(filter(evt => evt.phaseName === 'done' && evt.toState === 'enter'), take(1))
-            .subscribe(() => {
-            this.afterOpened.next();
-            this.afterOpened.complete();
-        });
-        baseInstance.animationStateChanged
-            .pipe(filter(evt => evt.phaseName === 'done' && evt.toState === 'exit'), take(1))
-            .subscribe(() => {
-            clearTimeout(this.closeTimeout);
-            this._finishDialogClose();
-        });
-        baseInstance.containerClick.pipe(takeUntilDestroyed(this.destroyRef$)).subscribe(() => {
-            this.close();
-        });
-        overlayRef.backdropClick().subscribe(() => this.close(undefined));
-        overlayRef.keydownEvents().subscribe(event => {
-            if (event.code === 'Escape' && !hasModifierKey(event)) {
-                event.preventDefault();
-                this.close(undefined);
-            }
-        });
-        overlayRef.detachments().subscribe(() => {
-            this.afterClosed.next(this.result);
-            this.afterClosed.complete();
-            this.componentInstance = null;
-            this.overlayRef.dispose();
-        });
-    }
-    close(result) {
-        this.result = result;
-        this.baseInstance.animationStateChanged
-            .pipe(filter(event => event.phaseName === 'start'), take(1))
-            .subscribe(event => {
-            this.overlayRef.detachBackdrop();
-            this.closeTimeout = setTimeout(() => {
-                this._finishDialogClose();
-            }, event.totalTime + 100);
-        });
-        this.baseInstance.startExitAnimation();
-    }
-    _finishDialogClose() {
-        this.overlayRef.dispose();
-    }
-}
+/**
+ * Token exposing the open dialog's `WrDialogRef` to components and
+ * directives rendered inside it (e.g. `[wrDialogClose]`).
+ *
+ * @internal
+ */
+const WR_DIALOG_REF = new InjectionToken('WR_DIALOG_REF');
 
 /**
  * @license
@@ -251,96 +112,104 @@ class WrDialogRef {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+const DEFAULT_PANEL_CLASS = 'wr-dialog-panel';
+const DEFAULT_BACKDROP_CLASS = 'wr-dialog-backdrop';
 /**
- * NGWR dialog service.
+ * Opens dialog components in an isolated NGWR overlay.
+ *
+ * Uses `WR_OVERLAY` so it composes cleanly with `provideWrOverlay()`
+ * — dialogs render into NGWR's own overlay container and never collide
+ * with other CDK consumers (Material, NG-ZORRO, etc.).
  *
- * {@tutorial} [How to use wr-dialog]{@link http://ngwr.dev/docs/components/dialog}
+ * @example
+ * ```ts
+ * const dialog = inject(WrDialog);
+ *
+ * const ref = dialog.open(ConfirmComponent, {
+ *   data: { message: 'Delete this item?' },
+ *   width: '24rem',
+ * });
+ *
+ * const ok = await ref.awaitClose();
+ * if (ok) remove();
+ * ```
+ *
+ * @see https://ngwr.dev/components/dialog
  */
-class WrDialogService {
-    constructor() {
-        this.overlay = inject(Overlay);
-        this.injector = inject(Injector);
-        this.parentModal = inject(WrDialogService, { optional: true, skipSelf: true });
-        this.openedDialogsAtThisLevel = [];
-        this.afterAllClosedAtThisLevel = new Subject();
-    }
-    get openedDialogs() {
-        return this.parentModal ? this.parentModal.openedDialogs : this.openedDialogsAtThisLevel;
-    }
-    get _afterAllClosed() {
-        const parent = this.parentModal;
-        return parent ? parent._afterAllClosed : this.afterAllClosedAtThisLevel;
-    }
-    open(options) {
-        const _options = options || new WrDialogOptions();
-        const positionStrategy = _options?.positionStrategy || this._defaultPositionStrategy();
-        const scrollStrategy = _options?.scrollStrategy || this._defaultScrollStrategy();
-        const hasBackdrop = _options?.hasBackdrop || true;
-        const backdropClass = _options?.backdropClass || 'wr-backdrop';
-        const overlayRef = this._createOverlay(positionStrategy, scrollStrategy, hasBackdrop, backdropClass);
-        const dialogContainer = this._attachDialogContainer(overlayRef, _options);
-        const dialogRef = this._attachDialogContent(dialogContainer, overlayRef, _options);
-        dialogContainer.dialogRef = dialogRef;
-        this.openedDialogsAtThisLevel.push(dialogRef);
-        dialogRef.afterClosed.subscribe(() => this._removeOpenedModal(dialogRef));
-        return dialogRef;
-    }
-    _defaultPositionStrategy() {
-        return this.overlay.position().global().centerVertically().centerHorizontally();
-    }
-    _defaultScrollStrategy() {
-        return this.overlay.scrollStrategies.block();
-    }
-    _createOverlay(positionStrategy, scrollStrategy, hasBackdrop, backdropClass) {
-        const overlayConfig = new OverlayConfig({
-            positionStrategy,
-            hasBackdrop,
-            backdropClass,
-            scrollStrategy,
-        });
-        return this.overlay.create(overlayConfig);
-    }
-    _attachDialogContainer(overlayRef, options) {
-        const userInjector = options && options.viewContainerRef && options.viewContainerRef.injector;
-        const injector = Injector.create({
-            parent: userInjector || this.injector,
-            providers: [
-                { provide: OverlayRef, useValue: overlayRef },
-                { provide: WrDialogOptions, useValue: options },
-            ],
+class WrDialog {
+    overlay = inject(WR_OVERLAY);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    parentInjector = inject(EnvironmentInjector);
+    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    open(component, options = {}) {
+        const panelClasses = [DEFAULT_PANEL_CLASS];
+        const extra = options.panelClass;
+        if (typeof extra === 'string') {
+            panelClasses.push(extra);
+        }
+        else if (extra) {
+            for (const cls of extra)
+                panelClasses.push(cls);
+        }
+        const overlayRef = this.overlay.create({
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+            scrollStrategy: this.scrollStrategies.block(),
+            hasBackdrop: true,
+            backdropClass: DEFAULT_BACKDROP_CLASS,
+            panelClass: panelClasses,
+            width: options.width,
+            maxWidth: options.maxWidth,
         });
-        const containerPortal = new ComponentPortal(WrDialogComponent, options?.viewContainerRef, injector);
-        const containerRef = overlayRef.attach(containerPortal);
-        return containerRef.instance;
-    }
-    _attachDialogContent(container, overlayRef, options) {
-        const dialogRef = new WrDialogRef(overlayRef, options, container);
-        const userInjector = options && options.viewContainerRef && options.viewContainerRef?.injector;
+        const dialogRef = new WrDialogRef(overlayRef);
+        if (this.isBrowser) {
+            const active = document.activeElement;
+            dialogRef.previouslyFocused = active instanceof HTMLElement ? active : null;
+        }
         const injector = Injector.create({
-            parent: userInjector || this.injector,
+            parent: this.parentInjector,
             providers: [
-                { provide: WrDialogRef, useValue: dialogRef },
-                { provide: WR_DIALOG_DATA, useValue: options?.data },
+                { provide: WR_DIALOG_DATA, useValue: options.data },
+                { provide: WR_DIALOG_REF, useValue: dialogRef },
             ],
         });
-        const contentRef = container.attachComponentPortal(new ComponentPortal(options?.component, options?.viewContainerRef, injector));
-        dialogRef.componentInstance = contentRef.instance;
-        return dialogRef;
-    }
-    _removeOpenedModal(dialogRef) {
-        const index = this.openedDialogs.indexOf(dialogRef);
-        if (index > -1) {
-            this.openedDialogs.splice(index, 1);
-            if (!this.openedDialogs.length) {
-                this._afterAllClosed.next();
-            }
+        const portal = new ComponentPortal(component, null, injector);
+        dialogRef.componentRef = overlayRef.attach(portal);
+        if (this.isBrowser) {
+            const host = overlayRef.overlayElement;
+            host.setAttribute('role', 'dialog');
+            host.setAttribute('aria-modal', 'true');
+            // Wire aria-labelledby to wrDialogTitle's auto-id once content is in DOM.
+            queueMicrotask(() => {
+                const titleEl = host.querySelector('[wrDialogTitle], [wr-dialog-title]');
+                if (titleEl?.id)
+                    host.setAttribute('aria-labelledby', titleEl.id);
+            });
+            // Trap focus inside the dialog and move initial focus in.
+            const trap = this.focusTrapFactory.create(host);
+            dialogRef.focusTrap = trap;
+            void trap.focusInitialElementWhenReady();
+        }
+        // Overlay subscriptions complete when the overlay is disposed, so no
+        // explicit teardown is required.
+        if (options.closeOnBackdropClick !== false) {
+            overlayRef.backdropClick().subscribe(() => dialogRef.close());
         }
+        if (options.closeOnEscape !== false) {
+            overlayRef.keydownEvents().subscribe(event => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    dialogRef.close();
+                }
+            });
+        }
+        return dialogRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialog, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: WrDialog });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialog, decorators: [{
+            type: Service
         }] });
 
 /**
@@ -349,47 +218,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: WrDialogModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogModule, providers: [WrDialogService] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    providers: [WrDialogService],
-                }]
-        }] });
-
+let uid = 0;
 /**
- * @license
+ * Styles a dialog title row. Use on a heading inside an opened dialog.
+ * Auto-assigns an `id` so the dialog panel can reference it via
+ * `aria-labelledby`.
  *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ * @example
+ * ```html
+ * <h2 wrDialogTitle>Confirm delete</h2>
+ * ```
  */
-class WrDialogCloseDirective {
-    _onButtonClick(event) {
-        event.preventDefault();
-        this.dialogRef.close(undefined);
-    }
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogCloseDirective, deps: [{ token: WrDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: WrDialogCloseDirective, isStandalone: true, selector: "[wrDialogClose]", host: { listeners: { "click": "_onButtonClick($event)" } }, ngImport: i0 }); }
+class WrDialogTitle {
+    /** Generated id used for `aria-labelledby` wiring. */
+    id = `wr-dialog-title-${++uid}`;
+    /** @internal */
+    elementRef = inject((ElementRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: WrDialogTitle, isStandalone: true, selector: "[wrDialogTitle]", host: { properties: { "attr.id": "id" }, classAttribute: "wr-dialog__title" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialogTitle, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[wrDialogClose]`,
+                    selector: '[wrDialogTitle]',
+                    host: { class: 'wr-dialog__title', '[attr.id]': 'id' },
                 }]
-        }], ctorParameters: () => [{ type: WrDialogRef, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { _onButtonClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }] });
 
 /**
  * @license
@@ -397,21 +251,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrDialogContentDirective {
-    constructor() {
-        this.class = 'wr-dialog__content';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: WrDialogContentDirective, isStandalone: true, selector: "[wrDialogContent]", host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
+/**
+ * Styles the scrollable body section of a dialog.
+ *
+ * @example
+ * ```html
+ * <div wrDialogContent>…body…</div>
+ * ```
+ */
+class WrDialogContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: WrDialogContent, isStandalone: true, selector: "[wrDialogContent]", host: { classAttribute: "wr-dialog__content" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialogContent, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[wrDialogContent]`,
+                    selector: '[wrDialogContent]',
+                    host: { class: 'wr-dialog__content' },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding
-            }] } });
+        }] });
 
 /**
  * @license
@@ -419,32 +277,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrDialogFooterDirective {
-    constructor() {
-        this.position = 'end';
-    }
-    get elClasses() {
-        return {
-            'wr-dialog__footer': true,
-            'wr-dialog__footer--start': this.position === 'start',
-            'wr-dialog__footer--center': this.position === 'center',
-            'wr-dialog__footer--end': this.position === 'end',
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: WrDialogFooterDirective, isStandalone: true, selector: "[wrDialogFooter]", inputs: { position: "position" }, host: { properties: { "class": "this.elClasses" } }, ngImport: i0 }); }
+/**
+ * Footer row, typically holding action buttons.
+ *
+ * @example
+ * ```html
+ * <div wrDialogFooter align="end">
+ *   <wr-btn wrDialogClose>Cancel</wr-btn>
+ *   <wr-btn color="danger" (click)="confirm()">Delete</wr-btn>
+ * </div>
+ * ```
+ */
+class WrDialogFooter {
+    /**
+     * Horizontal alignment of the children.
+     *
+     * @default 'end'
+     */
+    align = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `wr-dialog__footer wr-dialog__footer--${this.align()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: WrDialogFooter, isStandalone: true, selector: "[wrDialogFooter]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialogFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDialogFooter]',
+                    host: { '[class]': 'classes()' },
                 }]
-        }], propDecorators: { position: [{
-                type: Input
-            }], elClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
 
 /**
  * @license
@@ -452,32 +315,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrDialogTitleDirective {
-    constructor() {
-        this.class = 'wr-dialog__title';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: WrDialogTitleDirective, isStandalone: true, selector: "[wrDialogTitle]", host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
+/**
+ * Closes the dialog when the host element is clicked.
+ *
+ * Optionally passes a `[wrDialogClose]` value as the close result.
+ *
+ * @example
+ * ```html
+ * <wr-btn wrDialogClose>Cancel</wr-btn>
+ * <wr-btn color="primary" [wrDialogClose]="true">Confirm</wr-btn>
+ * ```
+ */
+class WrDialogClose {
+    /**
+     * Value to pass to `close()`. When unset, the dialog closes with
+     * `undefined`.
+     */
+    result = input(undefined, { ...(ngDevMode ? { debugName: "result" } : /* istanbul ignore next */ {}), alias: 'wrDialogClose' });
+    ref = inject(WR_DIALOG_REF, { optional: true });
+    onClick() {
+        this.ref?.close(this.result());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: WrDialogClose, isStandalone: true, selector: "[wrDialogClose]", inputs: { result: { classPropertyName: "result", publicName: "wrDialogClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrDialogClose, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[wrDialogTitle]',
+                    selector: '[wrDialogClose]',
+                    host: { '(click)': 'onClick()' },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding
-            }] } });
-
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
- */
+        }], propDecorators: { result: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrDialogClose", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WR_ANIMATION_FADE_CLASS_NAME_MAP, WR_ANIMATION_ZOOM_CLASS_NAME_MAP, WR_DIALOG_DATA, WrDialogBaseDirective, WrDialogCloseDirective, WrDialogComponent, WrDialogContentDirective, WrDialogFooterDirective, WrDialogModule, WrDialogOptions, WrDialogRef, WrDialogService, WrDialogTitleDirective, wrDialogAnimations };
+export { WR_DIALOG_DATA, WrDialog, WrDialogClose, WrDialogContent, WrDialogFooter, WrDialogRef, WrDialogTitle };
 //# sourceMappingURL=ngwr-dialog.mjs.map